SPA Mode

Set ssr false globally or per-route in routeRules to ship Nuxt as a plain single-page application.

4 min read Level 2/5 #nuxt#spa

What you'll learn

Disable SSR globally in nuxt.config
Disable SSR per route with routeRules
Customize the loading screen with spaLoadingTemplate

Sometimes SSR is the wrong tool — fully-authed apps, internal dashboards, embedded widgets. Nuxt lets you ship a SPA with the same developer experience.

Global SPA

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false
})

nuxi build now outputs static HTML/JS — no Node server in production. You can host it anywhere that serves files.

Per-Route SPA

Mix and match — keep marketing SSR but render the dashboard client-only:

routeRules: {
  '/':            { prerender: true },
  '/dashboard/**': { ssr: false },
  '/account/**':   { ssr: false }
}

When a visitor lands directly on /dashboard/billing, Nuxt sends a minimal shell HTML page; the client bundle takes over and renders the route.

Loading Template

The shell can show a branded loading state instead of a blank screen. Create app/spa-loading-template.html:

<div class="loader">
  <img src="/logo.svg" alt="Loading" />
  <p>Loading your dashboard...</p>
</div>

Nuxt embeds this directly in the shell HTML — visible from the first byte until the JS bundle hydrates the real UI.

Trade-Offs

Pro — no server runtime needed, simplest deployment.
Pro — easy to embed inside another host page.
Con — empty initial HTML hurts SEO; not recommended for public-facing content.
Con — slower time-to-interactive on slow connections.

For pages a search engine should index, prefer SSR or prerender. For everything else, SPA mode is a fine choice.

The Nuxt Payload →