Using Vue-Multiselect in Laravel 8 Inertia.js app

(Note: This article has been updated with Breeze starter kit in place of Jetstream.)

In this tutorial we’ll use vue-multiselect (suadelabs/vue3-multiselect) package to insert searchable select field in a Laravel 8 app using VILT (Vue.js, Inertia.js, Lavarel, Tailwind) stack.

Assuming that the composer is installed, enter the following command to create new Laravel 8 project:

composer create-project laravel/laravel app 8.*

Now go inside the newly created app folder

cd app

Enter following command to add Breeze package:

composer require laravel/breeze:1.9.2

Now install Breeze with Vue and Inertia capability by entering following command:

php artisan breeze:install vue

Assuming node.js and npm are installed, enter the following command to install required node modules:

npm install

Next, setup database and Laravel environment file as usual. Here, I’m configuring SQLite database for simplicity purposes:

touch database/database.sqlite

Edit .env file as follows:

DB_CONNECTION = sqlite

You can remove DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD from .env when using SQLite database.

Enter following command to run the migrations:

php artisan migrate

Since, initial setup of Laravel app is complete, we can insert data into the database. Here we’ll take shortcut by inserting data through tinker in the users table. First enter the following command to start tinker:

php artisan tinker

Then enter the following command in order to generate 10 random users:

User::factory()->count(10)->create()

Type ‘exit’ and press Enter to leave the tinker shell. Now, we move onto Controller part by creating new UserController as follows:

php artisan make:controller UserController

This command will create app/Http/Controllers/UserController.php. Go ahead and open this file and change it as follows:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use Inertia\Inertia;

class UserController extends Controller
{
    public function index(Request $request)
    {
        return Inertia::render('Users/Index', [
            'users' => User::pluck('name')->toArray() 
        ]);
    }
}

Install vue-multiselect package by running the following command;

npm install @suadelabs/vue3-multiselect

It’s important to note that we’ve used forked version of vue-multiselect i.e. suadelabs/vue3-multiselect which is Vue3 compatible. Reason behind is that the newer versions of Inertia support Vue3 instead of Vue2. That’s why we’re using the forked version which supports Vue3 which in turn supports TypeScript. In short using vue-multiselect in newer Inertia app may generate errors due to TypeScript adoption in Vue3.

Now, create a new folder named ‘Users‘ in resources/js/Pages/ (be aware of capitalization). Create Index.vue inside ‘Users‘ folder (again watch out capitalization).

Insert following code in resources/js/Pages/Users/Index.vue:

<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options"
      :multiple="true"
      :close-on-select="true"
      placeholder="Pick some"
     >
    </multiselect>
  </div>
</template>

<script>
  import Multiselect from '@suadelabs/vue3-multiselect'
  export default {
    components: { Multiselect },
    props:{
        users:Array,
    },
    data () {
      return {
        selected: null,
        options: this.users,
      }
    },
    watch: {
      selected(now, previous) {
        console.log(now)
        console.log(previous)
      }
    },
  }
</script>

<style src="@suadelabs/vue3-multiselect/dist/vue3-multiselect.css"></style>

Finally, open routes/web.php and put the following line at the top of it:

use App\Http\Controllers\UserController;

And then insert following route into this web.php:

Route::get('users', [UserController::class, 'index'])->name('users');

Execute the following command to compile UI assets:

npm run dev

Run Laravel development server by executing:

php artisan serve

Enter the following URL in your browser to access index of Users:

localhost:8000/users

Start selecting / deselecting the items in drop-down menu and then observe the changes in ‘selected‘ variable which are displayed in browser’s console as we’ve put a watcher on ‘selected‘ variable.