Laravel 9 Vue Auth Example

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *