Create UI Auth Using Vue Auth Scaffolding in Laravel 9

Like Laravel Bootstrap UI Auth, you can use Vue Auth scaffolding in Laravel 9. The front-end auth scaffolding will be generated using Vue js. The auth scaffolding will remain identical with the same functionalities. Even for the UI, it will also install Bootstrap CSS and JS. But, you are free to customize it as per your need. It will create the respective views in a separate folder named auth. You will find this folder in the resources/views folder. Also, you customize the functionalities and even the templates. So, everything is customizable here.

So, let’s see what we are going to achieve in this post.

You will have the basic Registration form. From here, you can register yourself.

When you will click on the Login option, you will have the login page.

Again, you will have the Reset password option. For sending the password reset link to the registered email, you will have to configure the email settings.

Let’s jump to the post now.

Use Yajra Datatable in Laravel 9 with Server Side Processing

Prerequisites

We will be implementing Bootstrap UI Auth using Auth Scaffolding in Laravel 9. Therefore, you will require the following configurations.

• PHP >=8.0.2
• Composer
• Apache/Nginx Server
• VS Code Editor (Optional)
• MySQL (version > 5)

Create Project For Vue UI Auth in Laravel 9

If you already have a Laravel project setup, then simply skip this step.

composer create-project --prefer-dist laravel/laravel auth-app

Create and Configure Database

You have to create a database and then configure it in the Laravel application.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=DATABASE_NAME
DB_USERNAME=DATABASE_USERNAME
DB_PASSWORD=DATABASE_PASSWORD

Once, you have done, let’s proceed to the next step.

How to Upload Multiple Images Using Ajax in Laravel 9

Install UI Auth Package in Laravel 9 For Vue Auth

Open the terminal and hit the below command.

composer require laravel/ui

It will take a couple of seconds to install the package.

Next, you have to install the Vue Auth Scaffolding.

How to Upload Image Using Ajax in Laravel 9 with Validation

Install Frontend Auth Scaffolding Using Vue Auth

As similar to Bootstrap front end auth, you can install the Vue auth as well. So, hit the below command in the terminal.

php artisan ui vue --auth

The command will generate the Login and Register authentication. But, it won’t generate the UI. When you will check the Laravel application, then you will have the auth option on the homepage.

Let me show you quickly for a better understanding.

But, when you will navigate to the Login or Register page, the UI will look broken. This is happening due to the missing file of CSS and JS.

Hence, let’s generate it for this. So, stay ahead to the terminal and hit the below command.

npm install && npm run dev

It will build the CSS and JS files and will apply them to the project.

Now, you are ready to go. This time the UI will be fixed because the CSS and JS files are applied on the auth pages.

Before making any DB operations like Register, you will have to migrate the tables first.

Migrate Database

Open the terminal and hit the below command.

php artisan migrate

That’s it. Now, you can use Register, Login, and other Auth functionalities.

Conclusion

Here, we have generated the basic auth scaffolding using the UI Auth. The front-end scaffolding is generated by Vue –auth. So, I hope this will help you to understand and use the basic auth scaffolding in Laravel 9.