How to Vue Js Auth Scaffolding in Laravel 9?

Jan 04, 2023

.

Admin

How to Vue Js Auth Scaffolding in Laravel 9?

Hello Friends,

We'll talk about laravel 9 instal vue in this tutorial. Let's talk about the scaffolding for laravel 9 vue auth. With the aid of this example, you may instal Vue JS in Laravel 9. The scaffolding for authentication in Laravel 9 may be understood using vue. So let's make an example of how to use vue in Laravel 9 by following a few steps.

The Laravel Giver UI module makes the simple auth scaffolding step possible. Using bootstrap, react, and vue, Laravel UI offers basic authentication capabilities including login, registration, password reset, email verification, and password confirmation.

In this tutorial, I will give you simple steps of how to install vue js and how to create auth scaffolding using Vue in laravel 9 version.

Now let's start.

Install Laravel Application


This is optional; 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 execute the following command to instal the Laravel UI package:

composer require laravel/ui

The laravel ui package command must then be installed in order to use vue to create auth scaffolding. Let's execute the command below:

php artisan ui vue

OR

php artisan ui vue --auth

Now let's run bellow command for install npm:

npm install && npm run dev

It will generate CSS and js min files.

Next run migration command:

php artisan migrate

Run Laravel App:

After completing all necessary steps, you must now execute the command shown below and press Enter to launch the Laravel application:

php artisan serve

Now, Enter the provided URL into your web browser to view the app's 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...

#Laravel 9

#Vue.Js