Courses

Vue Inertia + Laravel 11: From Scratch

Working Login Form

Summary of this lesson:
- Creating a Vue login form component with email, password, and remember me inputs
- Implementing form handling with Inertia's useForm
- Setting up Laravel login route and LoginController
- Protecting routes with auth middleware

Now that we have learned how to work with forms, let's implement the same knowledge into the login form.


Front-end

So, let's add the HTML part of the form.

resources/js/Pages/Auth/Login.vue:

<script setup>
import GuestLayout from '../../Layouts/Guest.vue';
import { Head } from '@inertiajs/vue3';
</script>
 
<template>
<Head title="Log in" />
<GuestLayout>
<p>Login form coming soon.</p>
<form @submit.prevent="loginForm.post(route('login.post'))">
<div>
<!-- Email -->
<div>
<label for="email" class="block font-medium text-sm text-gray-700">
Email
</label>
<input v-model="loginForm.email" id="email" type="email" class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required autofocus autocomplete="username">
<p class="mt-2 text-sm text-red-600" v-show="loginForm.errors.email">
{{ loginForm.errors.email }}
</p>
</div>
 
<!-- Password -->
<div class="mt-4">
<label for="password" class="block font-medium text-sm text-gray-700">
Password
</label>
<input v-model="loginForm.password" id="password" type="password" class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required autocomplete="current-password">
</div>
 
<!-- Remember me -->
<div class="block mt-4">
<label class="flex items-center">
<input type="checkbox" name="remember" v-model="loginForm.remember" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
<span class="ml-2 text-sm text-gray-600">Remember me</span>
</label>
</div>
 
<!-- Buttons -->
<div class="flex items-center justify-end mt-4">
<button class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150 ml-4">
Log in
</button>
</div>
</div>
</form>
</GuestLayout>
</template>

The form itself is very similar to the post form. But, instead of...

The full lesson is only for Premium Members.
Want to access all 18 lessons of this course? (56 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord