Ant Design Vue multiselect in Laravel 9 VILT app

In this tutorial we’ll embed multiselect functionality in a Laravel 9 VILT app using Ant Design Vue select component.

Laravel 9.x requires a minimum PHP version of 8.0. This tutorial assumes that you are using Linux, macOS or WSL on Windows and Node.js, Composer and PHP 8 along with required modules i.e bcmatch, sqlite, mbstring, xml, zip, gd, mcrypt are properly installed. Also make sure that SQLite is installed as we’ll be using SQLite to keep things simple and quick; you may use MySQL or PostgreSQL as you like, however make sure the corresponding PHP module is installed too.

Using Composer, enter following command in terminal to install Laravel 9;

composer create-project laravel/laravel app 9.*

Go inside newly created app folder by executing;

cd app

Now, add Breeze package by executing following command;

composer require laravel/breeze:* --dev

Then, install Breeze with Vue and Inertia.js functionality by executing;

php artisan breeze:install vue

The above command will also install required node modules and compile the UI assets for the first time.

Next, setup database and Laravel environment file. Here, we’re configuring SQLite database for simplicity purposes. So, being in parent folder (app), execute following command in order to create new SQLite database file;

touch database/database.sqlite

Then find .env config file in the parent directory, open it and amend DB_CONNECTION line as follows;

DB_CONNECTION = sqlite

Remove or comment out DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD lines from .env as we are using local SQLite database file.

Now enter following command in order to run the migrations:

php artisan migrate

In order to populate database quickly, let’s utilize User model and its factory which are installed by default. So, enter following command to invoke tinker;

php artisan tinker

And then enter following command to add 20 randomly generated users in database;

User::factory(20)->create()

Type ‘quit’ and press Enter to exit tinker.

Since we have done the initial setup of Laravel 9 VILT app and also set up the database for testing purposes, let’s move towards incorporating Ant Design Vue select component. First, install node module ant-design-vue by executing following command in parent (app) folder:

npm install ant-design-vue --save

Then, create a new folder Users inside resources/js/Pages by entering following command in parent folder:

mkdir resources/js/Pages/Users

Now, create Index.vue file inside this Users folder by entering following command:

touch resources/js/Pages/Users/Index.vue

Then, insert following code inside Index.vue:

<template>
  <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
      <Select 
      v-model:value="selected"
      :options="users"
      :field-names="{label:'name', value:'id'}"
      filterOption="true"
      optionFilterProp="name"
      mode="multiple"
      placeholder="Please select"
      showArrow
      @change="onChange"
      class="w-full"
      />
    </div>
    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
      Selected items' IDs: {{ selected }}
    </div>  
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Select } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const selected = ref([])

const props = defineProps({
    users : Object,
})

const onChange = (value) => {console.log("Selected items\' IDs: "+value)}

</script>

All the attributes in Select tag are self-explanatory; however, a couple of things here are noteworthy. First, we used :field-names attribute in order to tell Select that ‘name‘ and ‘id‘ fields inside users object are to be treated as ‘title‘ and ‘value‘ respectively. Then, we utilized filterOption and optionFilterProp to tell Select that ‘name‘ field be used when filtering the list based on input by user.

Finally, insert following new route inside routes/web.php:

Route::get('/users', function () {
    $users = App\Models\User::all();
    return Inertia::render('Users/Index', ['users'=>$users]);
})->name('users');

Compile UI assets by entering following command:

npm run build

Enter following command to run development server;

php artisan serv

And then, enter following URL in the browser:

localhost:8000/users