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

Learn to install and configure Laravel Sanctum for spa authentication with sessions and cookies in Laravel 11, including stateful domains, csrf cookies, api tokens, and Fortify login and registration.

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.

Perform a quick authentication test using Axios to verify login works with CSRF tokens and Sanctum cookies, then prepare to abstract the logic into composables.

Learn how composables manage authentication state with a use auth module, using reactive state and getters and setters to track the name (admin to John Doe) and render it.

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.

Test the login flow by calling the attempt method to fetch the currently authenticated user from the backend, set the authenticated state, and display the user's name in navigation.

Authenticate on every page load by checking the backend for a valid user and updating the use auth composable's authenticated state. Main.js runs this check before mounting the app.

Learn to display validation errors during login by handling 422 responses, storing errors in a ref object, and rendering them in the login view.

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.

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.

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.

Build and render a login page in a Vue.js SPA with Tailwind styling, implement form handling, validation, routing to the dashboard on success, and a header for authenticated pages.

Implement the logout flow by invoking the logout action via the use auth composable, then redirect to login and hide the mobile navigation.

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.

Build a middleware pipeline in a Vue.js SPA to guard authenticated routes, with meta middleware and example middleware, redirecting unauthenticated users to login using beforeEach and next.

Define a redirect if guest middleware that blocks dashboard access for unauthenticated users, using the use auth composable to read the authenticated boolean and route to login.

Implement redirect if authenticated middleware to block access to login and register, inspect params in the middleware pipeline, and fix route registration order by loading auth state first.

Learn to use api resources in Laravel to format and limit user data sent to the front end, and disable data wrapping for cleaner responses.

Build a full stack student management system with Laravel as backend and Vue.js frontend, implementing CRUD operations, dependent dropdowns, server-driven pagination, multi-column search, and class-based filtering.

Define the models, migrations, factories, seeders, and relationships for classes, sections, and students, with foreign keys and belongs to and has many relationships.

Display the students data in a Laravel 11 and Vue.js 3 front-end app with Sanctum auth, using API resources and pagination, and a composable that fetches data via Axios.

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.

Implement dependent dropdowns by listening for class changes, querying the backend with the selected class id to fetch sections, and populating the section dropdown via a use section composable.

Copy the create view to an edit view, populate fields from the backend, and submit a put request to api/students with the id, handling validation and redirecting to the index.

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.

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.

Add a multi-column search by introducing a student model scope and a front end search box that filters by name or email, with pagination resetting on term changes.

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.