How do you prevent a 419 CSRF mismatch when registering from a Vue SPA with Laravel Fortify and Sanctum?

Configure Sanctum for stateful domains, enable Axios credentials, and request `/sanctum/csrf-cookie` before sending the Fortify registration request.

How should a Vue form display Laravel 422 validation errors?

Catch the Axios 422 response, read `error.response.data.errors`, and map each field's messages to the corresponding Vue form input.

How can Laravel and Vue keep paginated posts synchronized with the URL after a page refresh?

Store the current page in the `page` query parameter, fetch posts whenever it changes, and initialize the Pinia store from that query parameter on load.

Free online course Laravel

Duration of the online course: 4 hours and 4 minutes

New

Build a modern Laravel API + Vue SPA: auth with Sanctum/Fortify, Pinia state, CRUD and pagination. Join this free course and level up fast.

In this free course, learn about

How to scaffold separate Laravel API backend + Vue 3 SPA frontend (starter kit selection)
How Fortify and Sanctum work together for session-cookie SPA auth
How to prevent 419/CSRF mismatch: fetching /sanctum/csrf-cookie with Axios
Building register/login forms in Vue; using FormKit for cleaner form components
Handling Laravel 422 validation errors in Vue forms and showing field messages
Customizing Fortify RegisterResponse and choosing correct SPA-friendly responses
Redirecting after auth in a Vue Router SPA (dashboard navigation flow)
Centralizing auth in a typed Pinia store; persisting state and protecting routes
Axios global error handling for 401/419/404/500 while keeping auth state consistent
Creating authenticated post APIs in Laravel (migrations, controllers, resources, routes)
CRUD flow for posts: create, list, show single via Vue Router, update by slug
Fetching data on view mount and structuring API calls for posts in Vue components
Server-side pagination with Laravel resources; exposing only formatted fields
Typing Pinia state for paginated posts; syncing page with URL and refresh behavior

About the free online course

Build the skills to create a modern web app that feels seamless for users and stays maintainable for developers. In this free Laravel course, you’ll learn how to connect a Laravel backend to a Vue single-page application, then take it beyond a simple demo by implementing real-world patterns for authentication, data flow, error handling, and performance-friendly UX.

You’ll start by setting up separate projects for the backend and the Vue frontend, understanding why that split matters for scalability and deployment. From there, you’ll tackle one of the most common pain points in SPA development: secure, cookie-based authentication. You’ll see how Sanctum and Fortify fit together, how CSRF protection works in practice, and how to avoid the frustrating 419 issues and CSRF mismatches that often appear when wiring Axios requests to Laravel sessions.

On the frontend, you’ll craft clean register and login experiences, handle server responses correctly, and display validation feedback the way users expect. You’ll also learn how to structure forms for reuse and clarity, and how to use TypeScript-friendly patterns to keep your code predictable as your project grows. By centralizing authentication logic, persisting state, and protecting routes properly, you’ll build an app that remains stable across refreshes and navigation changes.

Once the foundation is solid, you’ll implement a posts feature end to end: creating records, listing them, viewing individual items, and updating them with reliable routing. You’ll connect Vue Router to API resources, fetch data at the right moments in the component lifecycle, and keep UI state synchronized with the server. Pagination is treated as a first-class feature, including keeping the page state in the URL so refreshes and sharing links behave correctly.

Throughout the journey, you’ll learn how to respond gracefully to errors like 401, 404, 419, and 500 without breaking the user session or leaving your interface in an inconsistent state. By the end, you’ll have a practical workflow for building Laravel-powered APIs consumed by a Vue SPA, with patterns you can reuse in portfolio projects, freelance work, or production applications.

Course content

Video class: 01 Intro - Laravel VueJS Tutorial 2025 03m
Exercise: In a Vue SPA using a Laravel API with session cookies, how should Fortify and Sanctum be combined?
Video class: 02 Create Vue and Laravel Projects - Laravel VueJS Tutorial 2025 07m
Exercise: When setting up separate projects, which Laravel starter kit was chosen to scaffold an API-only backend for the Vue frontend?

Video class: 03 Install Fortify - Laravel VueJS Tutorial 2025 15m
Exercise: Avoiding 419 when registering via Fortify with Sanctum
Video class: 04 Make POST Request with Axios - Laravel VueJS Tutorial 2025 10m
Exercise: How to avoid CSRF mismatch when posting register from Vue to Laravel Sanctum
Video class: 05 Register Form - Laravel VueJS Tutorial 2025 12m
Exercise: How do you correctly fetch the CSRF cookie with Axios in a Laravel Sanctum plus Vue setup to enable user registration?
Video class: 06 Login Form - Laravel VueJS Tutorial 2025 08m
Exercise: In a Laravel plus VueJS SPA using Fortify, what response should the server return after successful user registration when customizing the RegisterResponse?

Video class: 07 Display Vlidation Errors - Laravel VueJS Tutorial 2025 15m
Exercise: How should a Vue form handle Laravel 422 validation errors in a Sanctum-authenticated app?
Video class: 08 Refactor Forms with FormKit - Laravel VueJS Tutorial 2025 15m
Exercise: Using FormKit to build a Laravel + Vue 3 login form
Video class: 09 Work with Types - Laravel VueJS Tutorial 2025 10m
Exercise: How should you redirect to the dashboard after a successful login or registration in a Vue Router SPA?

Video class: 10 Create Pinia Store - Laravel VueJS Tutorial 2025 13m
Exercise: Centralizing auth logic with Pinia in a Vue 3 + TypeScript app within a Laravel stack
Video class: 11 Persist Pinia State - Laravel VueJS Tutorial 2025 18m
Exercise: In a Vue 3 plus Pinia frontend for a Laravel API, which setup best avoids redundant user fetches and enforces route protection?
Video class: 12 Axios error handling - Laravel VueJS Tutorial 2025 13m
Exercise: In a Vue frontend consuming a Laravel API, what is the best way to handle 401, 419, 404, and 500 responses while keeping auth state consistent?

Video class: 13 Backend Model Migration and Controllers - Laravel VueJS Tutorial 2025 09m
Exercise: How do you register an authenticated API resource for posts under dashboard/posts while excluding create and edit actions?
Video class: 14 Store new Post - Laravel VueJS Tutorial 2025 12m
Exercise: Laravel and Vue: Correct flow to create a Post and return to the list
Video class: 15 Display Posts - Laravel VueJS Tutorial 2025 07m
Exercise: In a Laravel plus Vue workflow, which Vue lifecycle hook should be used to fetch a user posts from the API when the component appears?
Video class: 16 Vue Laravel Pagination 13m
Exercise: How do you correctly implement server side pagination in a Laravel plus Vue app while exposing only formatted fields to the client

Video class: 17 Display Single Post - Laravel VueJS Tutorial 2025 12m
Exercise: Fetching a single post with Vue Router and Laravel API resource
Video class: 18 Updating Posts - Laravel VueJS Tutorial 2025 12m
Exercise: Implementing post edit by slug in Laravel and Vue
Video class: 19 Pinia Post Store - Laravel VueJS Tutorial 2025 15m
Exercise: In a Laravel plus VueJS app, how should you type the store state for a paginated posts list from an API?
Video class: 20 Final Touch - Laravel VueJS Tutorial 2025 14m
Exercise: How do you keep pagination in sync with the URL and load the correct page on refresh in a Laravel plus Vue with Pinia app?

Learn aboutPHP

Explore free online PHP courses with certificates and learn to build dynamic, database-driven websites from scratch. Master PHP fundamentals, syntax, forms, sessions, MySQL integration, object-oriented programming, and web development best practices through flexible, self-paced lessons designed for beginners and aspiring developers.

Learn aboutLaravel

Explore free online Laravel courses designed to help beginners and developers master PHP web development, routing, Blade templates, databases, APIs, authentication, and more. Learn at your own pace with practical lessons, build job-ready skills, and earn a certificate upon completion to showcase your Laravel expertise.

Learn aboutVueJS

Explore the best free online VueJS courses and learn to build fast, interactive web applications with this popular JavaScript framework. Study Vue fundamentals, components, routing, state management, and real-world app development at your own pace. Enroll for free, improve your front-end skills, and earn a certificate upon completion.