Laravel 11 Vue JS Auth Scaffolding with Vite Tutorial

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:

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
  
OR
  
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:

http://localhost:8000/

now you can see layout bellow as here:

Home Page:

Login Page:

Register Page:

Dashboard Page:

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

I hope it can help you...