Login Registration Form Restful Api Using Laravel 9 and Vue 3

Introduction

This tutorial will guide you through the process of creating a login and registration form using a RESTful API with Laravel 9 and Vue 3. By the end of this tutorial, you will have a fully functional application that allows users to register and log in, utilizing the power of Laravel for the backend and Vue.js for the frontend.

Step 1: Set Up Laravel Backend

1. Install Laravel

   • Go to the official Laravel website.
   • Copy the installation command for Laravel 9.
   • Open your command line interface (CLI) and navigate to your desired directory.
   • Create a new Laravel project:

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

2. Create Database

   • Use a database management tool (like phpMyAdmin) to create a new database named DB_KMS.
   • Update the .env file in your Laravel project with your database name:

     DB_DATABASE=DB_KMS
     

3. Run Migrations

   • In your CLI, run:

     php artisan migrate
     

4. Set Up Routes

   • Open the routes/api.php file.
   • Define routes for registration and login:

     Route::post('register', [RegisterController::class, 'store']);
     Route::post('login', [LoginController::class, 'check']);
     

Step 2: Create Controllers and Models

1. Generate Controllers

   • Use the following commands to create the necessary controllers:

     php artisan make:controller RegisterController
     php artisan make:controller LoginController
     

2. Create User Model

   • Ensure you have a User model already present in the app/Models/User.php.

3. Implement Registration Logic

   • In RegisterController, implement the store method to handle user registration:

     public function store(Request $request) {
         $request->validate([
             'name' => 'required',
             'email' => 'required|email',
             'password' => 'required|min:6',
         ]);
         $user = User::create([
             'name' => $request->name,
             'email' => $request->email,
             'password' => Hash::make($request->password),
         ]);
         return response()->json(['status' => true, 'message' => 'Registration successful']);
     }
     

4. Implement Login Logic

   • In LoginController, implement the check method to handle user login:

     public function check(Request $request) {
         $credentials = $request->only('email', 'password');
         if (Auth::attempt($credentials)) {
             return response()->json(['status' => true, 'message' => 'Login successful']);
         }
         return response()->json(['status' => false, 'message' => 'Invalid credentials']);
     }
     

Step 3: Set Up Vue 3 Frontend

1. Install Vue CLI

   • If you haven't installed Vue CLI, do so with:

     npm install -g @vue/cli
     

2. Create Vue Project

   • Inside your main project directory, create a Vue project:

     vue create KMS_frontend
     

3. Install Axios for API Calls

   • Navigate into your Vue project directory and install Axios:

     cd KMS_frontend
     npm install axios
     

4. Create Registration Component

   • Create a new component Register.vue in the src/components directory:

     <template>
       <form @submit.prevent="saveData">
         <input v-model="name" placeholder="Name" required />
         <input v-model="email" placeholder="Email" required />
         <input v-model="password" type="password" placeholder="Password" required />
         <button type="submit">Register</button>
       </form>
     </template>
     <script>
     import axios from 'axios';
     export default {
       data() {
         return {
           name: '',
           email: '',
           password: ''
         };
       },
       methods: {
         async saveData() {
           const response = await axios.post('http://your-api-url/api/register', {
             name: this.name,
             email: this.email,
             password: this.password
           });
           alert(response.data.message);
         }
       }
     };
     </script>
     

5. Create Login Component

   • Create another component Login.vue similar to the registration component but for logging in.

Step 4: Integrate Components into Vue Router

1. Set Up Vue Router

   • In your Vue project, configure the router to include routes for the registration and login components.

2. Test the Application

   • Run both the Laravel server and the Vue application:

     php artisan serve  # for Laravel
     npm run serve      # for Vue
     

   • Access the application in your browser to test the registration and login functionalities.

Conclusion

In this tutorial, you have learned how to set up a login and registration system using Laravel for the backend and Vue.js for the frontend. You created the necessary routes, controllers, and models in Laravel, and built the user interface and API calls in Vue. You can now expand this project further by adding features such as user profile management, password reset, and more.