Laravel 9 Vue Auth Example

Laravel 9 vue auth scaffolding; In this tutorial, we will learn how to build a login, register, logout, forget password, profile, and reset password page by using laravel UI and vue auth scaffolding in laravel 9 apps.

Laravel 9 befault provide vue ui and auth package for login, register, logout, reset password, forget password, email verification. This package will install using very simple command.

Laravel 9 Vue Js Auth Scaffolding Example Tutorial

Use the following steps to build vue js auth scaffolding in laravel 9 apps:

• Step 1 – Install Laravel 9 App
• Step 2 – Database Configuration
• Step 3 – Install Laravel UI
• Step 4 – Setup Vue Auth Scaffolding
• Step 5 – Install Npm Packages
• Step 6 – Run PHP artisan Migrate
• Step 7 – Run Development Server

Step 1 – Install Laravel 9 App

In step 1, open your terminal and navigate to your local web server directory using the following command:

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

Then install laravel latest application using the following command:

composer create-project --prefer-dist laravel/laravel Laravel9Auth

Step 2 – Database Configuration

In step 2, open your downloaded laravel app into any text editor. Then find .env file and configure database detail like following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3 – Install Laravel UI

In step 3, install LARAVEL ui package in laravel app by using the following command:

composer require laravel/ui

Step 4 – Setup Vue Auth Scaffolding

In step 4, install auth scaffolding vue package in laravel app by using the following command:

php artisan ui vue --auth

Step 5 – Install Npm Packages

In step 5, open again command prompt and type the following command to install node js:

npm install

Then type the following command on cmd to run npm:

npm run dev

Step 6 – Run php artisan Migrate

In step 6, open terminal and type the following command on it to create database table:

php artisan migrate

Step 7 – Run Development Server

In step 7, use the following command to start development server:

php artisan serve

Now, open browser and hit the following url on it:

http://127.0.0.1:8000/

Recommended Laravel Tutorials