Laravel 11 Vue JS Auth Scaffolding with Vite Tutorial

By Hardik Savani April 16, 2024 Category : Laravel

We will learn how to set up Vue.js auth scaffolding using Vite in a Laravel 11 application.

Laravel offers a UI package for easy authentication scaffolding. Laravel UI provides straightforward authentication features such as login, registration, password reset, email verification, and password confirmation using Bootstrap, React, and Vue.

In this tutorial, I will provide you with simple steps on how to install Vue.js and create auth scaffolding using Vue in Laravel 11.

So, let's follow the steps below:

laravel 11 install vue js

Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Install Laravel UI

Let's run the below command to install the Laravel UI package:

composer require laravel/ui

Next, you have to install the Laravel UI package command for creating authentication scaffolding using Vue. So, let's run the command below:

php artisan ui vue
php artisan ui vue --auth

Now, let's run the below command to install npm:

It will generate CSS and JS min files.

Next, run the migration command:

php artisan migrate

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:


now you can see layout bellow as here:

Home Page:

laravel 11 vue home

Login Page:

laravel 11 vue login

Register Page:

laravel 11 vue register

Dashboard Page:

laravel 11 vue dashboard

You can see bellow screen shot that laravel ui create js and component setup:

laravel 11 vue code

laravel 11 vue code 2

I hope it can help you...