How to Create Auth Scaffolding Using Vue JS in Laravel 10

The Auth scaffolding in Laravel is a set of pre-built functionality. It provides user authentication for a web application. You can create auth scaffolding in Laravel using different front-end libraries. We already created auth scaffolding using Bootstrap in Laravel 10. But in this post, we will be creating auth scaffolding using Vue JS in Laravel 10. Laravel’s authentication scaffolding includes a set of views, controllers, routes, and middleware. It provides the necessary functionality to register, log in, and log out users. Vue.js is a popular JavaScript framework for building user interfaces. While Laravel is a PHP web application framework. Laravel provides built-in support for authentication. Which can be used in combination with Vue.js to create a robust authentication system. We will install Laravel Vue auth in this example.

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.

Prerequisites

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
• Composer
• 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.