Bridging the Gap: Integrating Nuxt.js with Laravel Sanctum

Prerequisites

To follow along, you need a working knowledge of JavaScript and PHP. You should have a Laravel API already configured and Nuxt.js (version 2 is used here) installed. Basic familiarity with terminal commands and local development environments like Laravel Valet will help you manage local subdomains.

Key Libraries & Tools

• Axios: A promise-based HTTP client for the browser and Node.js.
• Nuxt Auth Module: A dedicated library to handle authentication strategies.
• Laravel Sanctum: Provides a featherweight authentication system for SPAs and simple APIs.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.

Environment Synchronization

For session-based auth to work, both apps must share a top-level domain. Use Laravel Valet to link your API to api.ergodnc.test and proxy your Nuxt app to app.ergodnc.test. In your Laravel .env, set SESSION_DOMAIN to .ergodnc.test. This dot prefix is non-negotiable; it tells the browser the cookie belongs to all subdomains. Additionally, update cors.php by setting supports_credentials to true to allow the browser to pass cookies back and forth.

Code Walkthrough: Data Fetching and Auth

In your Nuxt pages, the fetch hook is your best friend. It allows you to populate data on the server side or during client-side navigation.

async fetch() {
  const response = await this.$axios.get('/offices');
  this.offices = response.data;
}

For authentication, configure the Nuxt Auth Module in nuxt.config.js using the cookie strategy. You must define four critical endpoints: login, logout, user, and the Sanctum client-side-csrf cookie. This ensures Nuxt initializes the CSRF token before attempting a login.

Syntax Notes

Nuxt’s fetchState is an elegant way to handle UI states. Use $fetchState.pending to show loaders and $fetchState.error to catch failures. When using the Nuxt Auth Module, the $auth helper becomes globally available, allowing you to check $auth.loggedIn or access user data via $auth.user directly in your templates.

Tips & Gotchas

Always verify that your Laravel Sanctum stateful domains include your Nuxt URL. If you miss this, Laravel won't attach the session middleware, and your authentication will fail silently. If you get 401 errors after a session expires, use an Axios interceptor to catch the error and force a logout on the frontend to keep the UI in sync with the server.