Ant Design Vue components in Laravel 9 VILT app

In previous tutorial we built a Vue3 based datatable from scratch within a Laravel 9 VILT (Vue Inertia Laravel Tailwind) app. For learning and basic usage purposes that datatable is fine; however, when we seek productivity, robustness and enterprise-grade look and feel we usually need professionally developed UI components. There are numerous Vue UI kits available such as Vuetify, Quasar, Vue Material etc.; however, most of them are paid libraries. On the other hand, Ant Design Vue components library is a production-grade Vue UI library which is totally free. In next few tutorials we will cover some of the most important Ant Design Vue components including datatable. But first we’ll learn how to embed Ant Design Vue components into a Laravel 9 VILT app.

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 PHP modules i.e bcmatch, mbstring, xml, zip, gd, mcrypt are properly installed.

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 following command;

php artisan breeze:install vue

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

Since we are done with the initial setup of Laravel 9 VILT app, let’s move towards incorporating Ant Design Vue components. So, install node module ant-design-vue by executing following command in parent (app) folder:

npm install ant-design-vue --save

Now, we are all set to embed some Ant Design Vue components in our Vue files. So first create a new Vue file by entering following command:

touch resources/js/Pages/Index.vue

Then, insert following code inside resources/js/Pages/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">
      <Button @click="onClick" class="mr-2">Default Button</Button>
      <Button type="primary" @click="onClick" class="mr-2">Primary Button</Button>
      <Button danger @click="onClick">Danger Button</Button>
    </div>
    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
      <Input v-model:value="inp" placeholder="type here" />
      <InputSearch @search="onSearch" placeholder="input search text" />
    </div>
    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
      {{ inp }} {{ dat }}
    </div>
    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
      <DatePicker v-model:value="dat" @change="onChange"/>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Button, Input, InputSearch, DatePicker } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const inp = ref('')
const dat = ref('')
const onClick = (event) => {console.log(event)}
const onSearch = (value) => {alert("You searched for: "+value)}
const onChange = (value) => {console.log(value)}

</script>

Compile UI assets by executing following command:

npm run build

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

Route::get('/ant', function () {
    return Inertia::render('Index');
})->name('ant');

Run development server by executing following command;

php artisan serv

Enter following URL in the browser (also open the Developer Tools to observe the output on browser’s console):

localhost:8000/ant