In this section, we will see how to use a Tailwind CSS admin dashboard in Laravel 10 with Inertia Vue 3 using Larastarters.
Step 1: Create Laravel Project
To install a fresh new Laravel application, navigate to your terminal, type the command, and create a new Laravel app.
composer create-project laravel/laravel inertia-vue
Now, you need to connect the Laravel app to the database. Open the .env configuration file and add the database credentials as suggested below.
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
Step 2: Install Larastarters
Install Larastarters via composer in laravel.
composer require laraveldaily/larastarters --dev
Step 3: Step up & Configure Larastarters
Run the command below configure.
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 option number 1, choose a Tailwind CSS admin design theme (0, 1, or 2).
Which design theme you want to use? [windmill]
windmill ...................................................................... 0
notusjs ....................................................................... 1
tailwindcomponents ............................................................ 2
❯ 2
Step 4: Compile Project Assets
Compile starter kit if you are using laravel you don’t need to run or install npm. if any case you got error then run.
npm install && npm run dev
Next, run this command.
php artisan migrate
Step 5: Test Dashboard in Laravel 10 Inertia Vue 3
Now you need to log in or register.
http://127.0.0.1:8000/register
After register http://127.0.0.1:8000/dashboard