How to Use Dashboard in Laravel 10 Inertia Vue 3

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

integrate tailwind css admin

After register http://127.0.0.1:8000/dashboard

inertia vue 3 dashboard
saim ansari
saim ansari

I'm Saim Ansari, a full-stack developer with 4+ years of hands-on experience who thrives on building web applications that leave a lasting impression. When it comes to tech, I'm particularly adept at Laravel, React, Tailwind CSS, and the Tall Stack