We are going to achieve the auth scaffolding using Vue js. So, take a look at the below results.
You can register the user for creating a new account.
After successful registration, the system will redirect you to the dashboard page.
There is a logout option as well. So, after the logout, you will be redirected to the login page as shown below.
That’s it, so let’s continue with the post.
Table of Contents
We will be implementing Auth scaffolding using Vue JS in Laravel 10. Therefore, you will require a Laravel 10 application. However, in order to create a Laravel 10 application, you will need the below tools.
- PHP >=8.1
- Apache/Nginx Server
- VS Code Editor (Optional)
- MySQL (version > 5)
In case, if you already have the Laravel 10 project setup, then you can jump directly to the functionality part.
Install Laravel UI Package For Authentication
The Laravel UI package is a set of front-end scaffolding tools for Laravel. It allows developers to quickly scaffold the authentication and basic UI for their Laravel applications.
composer require laravel/ui
After adding the laravel UI package, you need to install the auth scaffolding using Vue js.
Install Laravel Vue UI Auth
The Laravel UI requires front-end authentication scaffolding. For installing the Vue auth, you have to run the below command.
php artisan ui vue --auth
After installing the Laravel Vue auth scaffolding, it will ask to install npm. Actually, Laravel UI Auth scaffolding works with the front-end library. Hence, the Vue JS auth scaffolding, will work with npm dependencies.
Install and Run npm in Laravel 10
You can install npm using the below command. This will install the front-end dependencies for the auth scaffolding.
npm install && npm run dev
The npm will run the vite. The vite bundles the front-end assets like CSS and JS. It makes the front end development faster in Laravel.
Next, you need to run the migration in order to migrate the schema. So, that you can perform the auth scaffolding features like register, login, logout, etc.
Run the Migration
To dump the database schema, you need to run the below command in Laravel 10.
php artisan migrate
Now, you can run the application to see the result of auth scaffolding.
Take a look at the app.js component created by Vue JS. You can find this component inside the resources/js folder. The app.js component is the same as in React JS. This is the root component here.
That means, all the components created in the Vue JS will be imported here in order to run.
We will be digging more into Vue JS in our upcoming posts with examples. So, it can be helpful to you.
That’s it for this post, I am wrapping it up. I hope, this post will give you a basic idea of implementing auth scaffolding in Laravel 10.
Leave a Reply