ItSolutionStuff.com

Laravel 11 Vue JS Auth Scaffolding with Vite Tutorial

By Hardik Savani • September 23, 2024
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
  
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:

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

Output:

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Laravel 11 Generate PDF File using DomPDF Example

Read Now →

Laravel 11 Multiple File Upload Example

Read Now →

Laravel 11 Form Validation Example Tutorial

Read Now →

Laravel 11 File Upload Example Tutorial

Read Now →

Laravel 11 Multiple Image Upload Tutorial Example

Read Now →

Laravel 11 Image Upload Example Tutorial

Read Now →

Laravel 11 CRUD Application Example Tutorial

Read Now →

Laravel 11 once() Helper Function Example

Read Now →

Exception/Error Handling in Laravel 11

Read Now →

Laravel 11 New a Health Check Route Example

Read Now →

How to Create Custom Middleware in Laravel 11?

Read Now →

How to Create and Use Enum in Laravel 11?

Read Now →

How to Publish Config Files in Laravel 11?

Read Now →