Deep Dive: Customizing Snipe-IT Frontend (Vue.js) for Additional Fields

1️⃣ Locate the Vue Components

Snipe-IT’s Vue.js frontend components are stored in:
📂 resources/js/components/

For assets, the main Vue component files are:

• EditAsset.vue – For editing an asset
• CreateAsset.vue – For creating a new asset
• ShowAsset.vue – For displaying an asset

---

2️⃣ Add a Custom Field to Vue Components

Let’s say we want to add a new field called “Warranty Expiry Date” to assets.

📝 Modify EditAsset.vue

1. Open resources/js/components/assets/EditAsset.vue
2. Locate the <form> section where fields are defined.
3. Add a new field under the existing ones:

vue
<template>
    <div>
        <!-- Other asset fields -->
        
        <div class="form-group">
            <label for="warranty_expiry">Warranty Expiry Date</label>
            <input type="date" class="form-control" v-model="asset.warranty_expiry" />
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            asset: {
                warranty_expiry: '' // Initialize the new field
            }
        };
    },
    methods: {
        saveAsset() {
            axios.put(`/api/v1/hardware/${this.asset.id}`, this.asset)
                .then(response => {
                    this.$emit('saved', response.data);
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
}
</script>

📝 Modify CreateAsset.vue

Repeat the same process in resources/js/components/assets/CreateAsset.vue, ensuring the field is added to the data() object.

---

3️⃣ Modify Backend to Support the New Field

To store and retrieve the new field, update the Eloquent model:

📝 Modify app/Models/Asset.php

Add the new field to the fillable array:

php
protected $fillable = ['name', 'serial', 'warranty_expiry', ...];

---

4️⃣ Modify API Controller (If Needed)

If you want API support, modify the AssetController:

📝 Modify app/Http/Controllers/API/AssetController.php

Ensure the warranty_expiry field is included in API responses:

phppublic function show($id)
{
    return response()->json(Asset::findOrFail($id)->makeHidden(['created_at', 'updated_at']));
}

---

5️⃣ Compile Vue.js Changes

After modifying the Vue components, rebuild the frontend:

sh
itcd /var/www/snipe-it
npm install
npm run dev   # or npm run prod for production

---

6️⃣ Final Step: Run Laravel Migrations

If you haven’t added warranty_expiry to the database yet, run:

shCopyEditphp artisan make:migration add_warranty_expiry_to_assets --table=assets

Then edit the migration file in database/migrations/:

phppublic function up()
{
    Schema::table('assets', function (Blueprint $table) {
        $table->date('warranty_expiry')->nullable();
    });
}

Run the migration:

shCopyEditphp artisan migrate

---

7️⃣ Restart Services

Finally, restart the necessary services:

shphp artisan config:clear
php artisan cache:clear
php artisan queue:restart
systemctl restart nginx  # or Apache

---

🎯 Now, Your Custom Field is Fully Integrated!

This process ensures that: ✅ The Vue.js frontend displays the new field.
✅ The backend Laravel API processes it correctly.
✅ The database stores the new field.