Laravel 11 + Vue.js 3 + Sanctum: SPA CRUD with Auth

Name: Laravel 11 + Vue.js 3 + Sanctum: SPA CRUD with Auth
Rating: 4.2 (10 reviews)

Learn how to authenticate with a Laravel API from Vue using the Composition API

Created byTapan Sharma

Last updated 4/2025

English

What you'll learn

Learn how to Develop a starter kit with Login/Registration features using Laravel Sanctum, Fortify and VueJS as the frontend stack
Learn how to set up a Laravel project with Sanctum and Fortify.
Learn how to Implement authentication in Vue using the Composition API.
Learn how to build a Middleware Pipeline to execute multiple Middlewares before a route is loaded
Learn how to configure and use Laravel Sanctum to communicate with a Single Page Application (SPA)

Course content

4 sections • 33 lectures • 5h 5m total length

Introduction to the Course3:43
Fresh Laravel and Vue Projects5:12
Set up a Laravel Sanctum API and a Vue.js client, scaffolding separate back-end and front-end projects, install dependencies, and run dev servers to ensure API-driven SPA communication.
Running on the same Domain2:54

Installing and Configuring Sanctum10:42
Installing Fortify4:19
Install and configure Laravel Fortify to provide back-end authentication features—login, registration, logout, and two-factor auth—while publishing actions, routes, migrations, and config for a frontend-agnostic app.
A Quick Authentication test14:59
How Composables work5:59
Moving Auth to a Composable6:11
Move the login logic into an auth composable, expose a login function, manage authentication with an authenticated boolean and user object, and render login or logout links based on status.
Attempting Authentication4:46
Authenticating on Reload5:03
Handling Authentication Errors6:44
Learn to display validation errors during login by handling 422 responses, storing errors in a ref object, and rendering them in the login view.
Logging Out3:31
Implement logout by adding a logout button that calls an async method in the user auth composable, sends a post request to the logout route, and clears auth state.

Installing Tailwind4:02
Install and configure tailwind CSS for the Vue.js front end, update the tailwind config and content for Vue components, and enable tailwind forms for improved form styling.
Building the navigation11:35
Build the navigation with Tailwind CSS, display the authenticated user's name, show login and logout links, and implement a responsive mobile menu linked to the dashboard route.
Building the Login page11:13
Logging out from the navigation4:16
Implement the logout flow by invoking the logout action via the use auth composable, then redirect to login and hide the mobile navigation.
Registering an Account15:06
Register an account by extending the login page with name and password confirmation, wiring a registration route and view, and handling Sanctum CSRF cookie, validation errors, and post-registration login.
Middleware Pipelines28:59
Guest Middleware5:32
Authenticated Middleware9:03
Switching to API Resources5:37

Introduction to Students Management System2:21
Define the Models/Migrations/Factories/Seeders/Relationships13:49
Displaying the Students Data13:54
Let's work on the Record Creation Flow14:33
Build the student record creation flow in a Laravel 11 and Vue.js 3 SPA with Sanctum auth, setting up the create view, route, and backend validations.
Implementing Dependent Dropdowns9:56
Display Validation Errors and Finalize Record Creation Flow14:06
Let's Work on Record Update Flow15:23
Deleting Individual Records4:58
Define a backend destroy method to delete a student via route model binding with a 200 json response, and use axios delete on the front end to update the ui.
Let's Implement Pagination20:53
Implement front-end pagination in the Laravel Vue.js spa by building a dynamic students URL, managing page state with a composable and metadata, and updating the view via a pagination component.
Implementing Search Functionality12:22
Implementing Filter By Class Functionality11:02
Implement a filter by class workflow in the single-page app by rendering a dropdown of classes from the database, sending the selected class id to the backend, and filtering students.
Improving Filter Query3:16

Requirements

Beginner Level knowledge of PHP/Laravel is required
Beginner Level knowledge of Vue is required

Description

Unlock the power of full-stack development with our step-by-step guide to authenticating with a Laravel API from a Vue front end using the Composition API. This course is designed to take you from the basics to advanced features, ensuring you understand how to secure your applications effectively.

Vue.js is by far the most popular JavaScript framework in the Laravel community, and the newest Vue.js 3 version with the Composition API is a new way to create SPAs - Single Page Applications.

Project's Description

Building an Authentication System

We'll start by setting up a fresh Laravel project with Sanctum and Fortify, configure everything step-by-step, and then we'll implement the ability to authenticate from Vue with a simple auth module — thanks to the flexibility of the Composition API.

In the second half of the course, we’ll create a beautiful starter kit with more features, including registration and middleware to protect routes.

Section Highlights:

Set up a fresh Laravel project with Sanctum and Fortify.
Learn how to properly configure Laravel Sanctum to be able to easily communicate with a front-end SPA
Learn how to properly configure a Vue application (along with Axios) to communicate with a Laravel Backend.
Configure and implement authentication using the Vue Composition API.
Build a simple yet effective authentication module.
Create a simple yet beautiful starter kit with authentication features like Login, and Registration.
Learn how to build a flexible Middleware Pipeline to execute multiple Middlewares before a route is loaded
Learn how to implement middlewares like Authenticated and Guest Middlewares to protect pages Accordingly
Learn how to use API Resources in Laravel to format the data accordingly

Building a Simple Student's Management System

In this section, we'll build a simple CRUD app and dive into the fundamentals of building CRUD applications with Laravel, Sanctum, and Vue.js Stack and we will learn the following topics along the way:

Learn about Watchers in Vue.js and Build dependent dropdowns in Vue
Learn how to work with Factories and Seeders in Laravel, and seed the necessary data for all of our Models
Learn how to use a Re-usable Vue Component to display validation messages.
Learn how to Implement Server Side Pagination from scratch.
Learn how to Implement Search Functionality in a Vue.js Powered Data-table.
Learn how to Implement filters in a Vue.js-powered data table.

Whether you're a beginner looking to get started with API authentication or an experienced developer wanting to refine your skills, this course has something for you. Join us and enhance your development toolkit today!

Who this course is for:

Students who want to Implement Authentication with Laravel Sanctum and Vue

Laravel 11 + Vue.js 3 + Sanctum: SPA CRUD with Auth

What you'll learn

Explore related topics

Course content

Introduction and Project Setup3 lectures • 12min

Authenticating with Sanctum9 lectures • 1hr 2min

Building a System9 lectures • 1hr 35min

Let's Build a mini Students Management System12 lectures • 2hr 17min

Requirements

Description

Who this course is for: