In this tutorial, we will be focusing on creating the user login handler for our Laravel 11, Inertia JS, Vue JS listing app. This will allow users to log in to their accounts and access the protected resources of our application.
Before we start, make sure you have set up the necessary configurations for Laravel, Inertia JS, and Vue JS in your project. If you haven’t, you can refer to the previous tutorials in this series.
Let’s get started with creating the user login handler:
Step 1: Create the Login Component
First, we need to create a login component in Vue JS. Create a new file named Login.vue inside the resources/js/Pages directory. Here is an example structure for the login component:
<template>
<div>
<h1>Login</h1>
<form @submit.prevent="handleSubmit">
<input v-model="form.email" type="text" placeholder="Email">
<input v-model="form.password" type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
email: '',
password: ''
}
};
},
methods: {
async handleSubmit() {
await this.$inertia.post('/login', this.form);
}
}
};
</script>Step 2: Create the Login Route
Next, we need to create a POST route in our Laravel application to handle user login. Open the routes/web.php file and add the following route definition:
Route::post('/login', [AuthController::class, 'login']);Step 3: Create the AuthController
Now, we need to create the AuthController that will handle the user login process. Run the following command to generate the controller:
php artisan make:controller AuthControllerThen, inside the AuthController, add the login method:
public function login(Request $request)
{
$credentials = $request->only(['email', 'password']);
if (Auth::attempt($credentials)) {
return redirect()->intended('/dashboard');
}
return redirect('/login')->with('error', 'Invalid credentials');
}Step 4: Create the User Login Page
Now, create a new blade file named login.blade.php inside the resources/views directory. Add the following code to create the user login page:
@extends('layouts.app')
@section('content')
<template>
<div>
@if (session('error'))
<p>{{ session('error') }}</p>
@endif
<inertia :component="'Login'"/>
</div>
</template>
@endsectionStep 5: Update the App Layout
Finally, update the app layout file to include the Inertia JS root template. Add the following code to your app.blade.php file:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Meta tags, title, stylesheets, etc. -->
</head>
<body>
@inertia
</body>
</html>That’s it! You have now created the user login handler for your Laravel 11, Inertia JS, Vue JS listing app. Users can now log in to their accounts and access protected resources. Feel free to further customize and enhance the login functionality according to your requirements.
Awesome!
simple, professional and beautifully presented. well done!
Excellent job!