Nuxt 4 + Laravel API: Full-Stack Setup That Actually Scales

The Stack

Nuxt 4 on the frontend, Laravel 11 on the backend. Sanctum for auth. This combo handles 90% of SaaS needs without overengineering.

API Layer in Nuxt

Create a composable that wraps $fetch with base URL and auth headers:

export const useApi = () => {
  const config = useRuntimeConfig()

  return $fetch.create({
    baseURL: config.public.apiBase,
    credentials: 'include',
    onRequest({ options }) {
      const token = useCookie('XSRF-TOKEN')
      if (token.value) {
        options.headers = {
          ...options.headers,
          'X-XSRF-TOKEN': token.value,
        }
      }
    },
  })
}

Laravel Sanctum Setup

// config/sanctum.php
'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost:3000')),

Key Lessons

• Use useAsyncData not useFetch directly — better cache control
• Keep API routes versioned (/api/v1/) from day one
• Return consistent JSON shape — { data, meta, errors } everywhere

Deployed this pattern on SP360. Still running in production.