laravel 9 inertia vue 3 integrating dashboard example

In this section we will see how to easily integrate tailwind css admin dashboard in laravel 9 inertia vue 3 using Larastarters. Larastarters is a regular Laravel Starter Kit with a non-regular different design theme. Works only with the latest Laravel 9. The package suggests to install Laravel Breeze (Tailwind) or Laravel UI (Bootstrap) starter kit, and adds the chosen design theme on top.


Tool Use

LaravelDaily/Larastarters

Laravel 9 & Vite 3

Laravel Breeze Inertia Vue 3

Tailwind CSS 3.v with Form Plugin


Create laravel project

composer create-project laravel/laravel inertia-dashboard 


Now, fill the details in env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password


Install Larastarters

composer require laraveldaily/larastarters --dev


Run below command to choose the starter kit and the theme (options are listed below).

php artisan larastarters:install


Now Select breeze inertia with Tailwind CSS (Select number 1).

 Which Laravel starter kit you want to use? [Laravel Breeze (Tailwind)]
 Laravel Breeze (Tailwind) ............................................................. 0  
 Laravel Breeze & Inertia (Tailwind) ..............................................1  
 Laravel UI (Bootstrap) .......................................................................2  
❯ 1


After selecting number 1, Next Select tailwind css admin design theme(0,1,2).

 Which design theme you want to use? [windmill]
 windmill ...................................................................... 0  
 notusjs ....................................................................... 1  
 tailwindcomponents ............................................................ 2  
 2


Install npm dependencies and run vite

npm install && npm run dev 

and also run in next terminal run laravel server

php artisan serve


resources/js/Pages/Dashboard.vue

<template>
    <Head title="Dashboard"/>

    <BreezeAuthenticatedLayout>
        <div class="w-full px-4">
            <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
                <div class="flex-auto p-4">
                    You are logged in!
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>

<script>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue'
import { Head } from '@inertiajs/inertia-vue3';

export default {
    components: {
        BreezeAuthenticatedLayout,
        Head,
    },
}
</script>
laravel 9 inertia integrating tailwind css admin dashboard