The tail of Getting Started is where Nuxt stops being a Vue framework and becomes a deployable full-stack application. Testing and upgrading are the chapters candidates skip and interviewers do not.

Know — Server

• Powered by Nitro: the server/ directory holds endpoints (server/api, server/routes), middleware (server/middleware) and plugins; Nitro provides the universal deployment presets and hybrid rendering through routeRules. Server-side $fetch to your own routes calls the handler directly without an HTTP round trip, and internal routes are typed ($fetch('/api/hello') infers the return type).

Know — Layers

• Use cases: shared config presets, component libraries, themes, module presets. Usage: extends with a relative path, an npm package or a git URL, or drop a folder in layers/ for auto-registration. Priority: the project wins, then auto-scanned layers/ (alphabetical, later names override earlier), then extends entries (earlier entries override later ones); control it by naming (1.base, 2.theme) or by using extends for explicit ordering. The Layers section has fourteen pages on this.

Know — Prerendering

• Crawl-based: nuxt generate (or nuxt build --prerender) starts from / and follows links; nitro.prerender.routes adds start routes, crawlLinks: false stops crawling, ignore excludes patterns. Selective: routeRules: { '/path': { prerender: true } } with nuxt build for a hybrid deployment.
• Payload extraction (experimental.payloadExtraction, on by default): each prerendered page writes _payload.json, which client-side navigation loads instead of hitting a server.
• Runtime configuration: prerenderRoutes('/path') inside a page adds routes discovered from data; the prerender:routes Nuxt hook (routes.add(...)) and the prerender:generate Nitro hook (route.skip = true) adjust the list programmatically.

Know — Deployment

• Node.js server (default preset): node .output/server/index.mjs, configured with PORT/HOST or NITRO_PORT/NITRO_HOST; serve the same build under several base paths with NUXT_APP_BASE_URL; run under PM2 with an ecosystem file; NITRO_PRESET=node_cluster for cluster mode.
• Static hosting: nuxt generate outputs .output/public; static fallback pages 200.html and 404.html serve client-rendered routes; client-side only with ssr: false for a pure SPA.
• Hosting providers are detected automatically (zero-config presets); set explicitly with nitro.preset, NITRO_PRESET or SERVER_PRESET. CDN proxy: NUXT_APP_CDN_URL serves assets from a CDN, and proxies must forward X-Forwarded-* headers.

Know — Testing

• Install: @nuxt/test-utils, vitest, @vue/test-utils, and happy-dom or jsdom. Unit testing: vitest.config.ts with defineVitestConfig (single project) or defineVitestProject for a projects setup; the Nuxt runtime environment is enabled per file with // @vitest-environment nuxt, by naming files *.nuxt.spec.ts, or for a whole project with environment: 'nuxt'; environmentOptions.nuxt sets rootDir, domEnvironment, overrides and built-in mocks (intersectionObserver, indexedDb).
• Organising tests: test/unit (plain Node), test/nuxt (Nuxt environment; these directories are included in the app's TypeScript context), test/e2e; run one with npx vitest --project nuxt. Keep the Nuxt environment separate from end-to-end tests.
• Helpers: mountSuspended, renderSuspended (Testing Library), mockNuxtImport, mockComponent, registerEndpoint. Browser mode via @nuxt/test-utils/browser with @vitest/browser-playwright. End-to-end: setup() from @nuxt/test-utils/e2e (options rootDir, configFile, build, server, port, host for a prebuilt server, browser, runner), then $fetch, fetch, url, createPage, useTestContext; a Playwright fixture (@nuxt/test-utils/playwright) adds goto(url, { waitUntil: 'hydration' }). @nuxt/test-utils 4 requires Vitest 4 or 5.

Know — Upgrade Guide

• Upgrading: npx nuxt upgrade --dedupe; the nightly channel for pre-releases; testing Nuxt 5 through the documented nightly or future.compatibilityVersion: 5.
• Migrating to Nuxt 4 with npx codemod@latest nuxt/4/migration-recipe. Changes: new app/ directory structure; singleton data-fetching layer (shared keys, consistent options); corrected module loading order in layers; deduplication of route metadata; normalised component names; Unhead v2; new DOM location for the SPA loading screen; parsed error.data; more granular inline styles; page meta scanned after resolution; shared prerender data; data/error default to undefined; boolean dedupe values removed; defaults respected when clearing data and useState; pending aligned with status; key-change behaviour; shallow data reactivity; absolute paths in builder:watch; window.__NUXT__ removed; directory index scanning; template compilation changes; TypeScript configuration split into project references; removal of some experimental features and of the top-level generate config; normalised page component names.

How it works

import { defineConfig } from 'vitest/config'
import { defineVitestProject } from '@nuxt/test-utils/config'

export default defineConfig({
  test: {
    projects: [
      { test: { name: 'unit', include: ['test/unit/**/*.spec.ts'], environment: 'node' } },
      await defineVitestProject({
        test: {
          name: 'nuxt',
          include: ['test/nuxt/**/*.spec.ts'],
          environment: 'nuxt',
          environmentOptions: { nuxt: { domEnvironment: 'happy-dom', mock: { intersectionObserver: true } } },
        },
      }),
    ],
  },
})

import { describe, expect, it } from 'vitest'
import { $fetch, createPage, setup } from '@nuxt/test-utils/e2e'

describe('home', async () => {
  await setup({ browser: true })

  it('renders on the server', async () => {
    expect(await $fetch('/')).toContain('<h1>')
  })

  it('has no client errors after hydration', async () => {
    const page = await createPage('/')
    const errors: string[] = []
    page.on('pageerror', e => errors.push(e.message))
    await page.waitForLoadState('networkidle')
    expect(errors).toEqual([])
  })
})

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('prerender:generate', (route) => {
    if (route.route?.startsWith('/preview/')) route.skip = true
  })
})

Exercise

Be able to say