Nuxt.js

useFetch and useAsyncData fetch during server rendering and ship the result in the Nuxt payload, so hydration reuses it instead of refetching. A bare $fetch in setup runs on the server and again in the browser; keep $fetch for user-triggered calls.

In Nuxt 4, app/pages/index.vue serves /, app/pages/recipes/index.vue serves /recipes and app/pages/recipes/[slug].vue serves /recipes/lemon-tart. That page reads the segment through the auto-imported useRoute(): route.params.slug is 'lemon-tart'.

With Nuxt 4's default ssr: true, each request gets server-rendered HTML plus a payload for hydration. ssr: false sends a shell with an empty #__nuxt root for the browser to fill. nuxt generate prerenders pages into static HTML files at build time.

Both folders hold Nitro handlers exported with defineEventHandler. Files in server/api are served under /api, files in server/routes at the bare path; brackets in a file name become parameters and a .get or .post suffix limits the method.

A plain ref(Math.random()) is re-created when setup runs again in the browser, so the client value differs from the server HTML. useState stores its value in the Nuxt payload; during hydration it finds that value and skips the initialiser, so both sides match.

lazy: true stops client navigation waiting on the data; server: false moves the fetch to the browser after hydration; immediate: false waits for execute(); enabled: false (Nuxt 4.5+) blocks every run. status shows idle, pending, success or error.

runtimeConfig holds values that differ per deployment and can be overridden by NUXT_ environment variables; only its public section reaches the browser. app.config.ts holds build-time, non-secret settings such as theme or title, and all of it is bundled into the client.

In Nuxt 4, routeRules in nuxt.config.ts map URL patterns to behaviour: prerender: true for marketing pages, no rule for SSR product pages, isr or swr for the blog, and ssr: false for /dashboard/**. The app is built with nuxt build.

Use getRouterParam for the path parameter, getQuery for the query (values arrive as strings) and await readBody for the body, or their validated variants that answer 400. Reject input by throwing createError with status and statusText.

Inside Nuxt route middleware, navigateTo only produces a redirect target; the middleware's return value decides the navigation. Unreturned, the middleware returns undefined and /account renders; returned, Nuxt redirects to /login, as a 302 during the server render.

List it in the modules array of nuxt.config.ts as a package name, a path, a [name, options] tuple or an inline function, or set options under the module's config key. The file runs in Node when nuxt dev or nuxt build starts.

Without a key, Nuxt's compiler appends one unique to that call site in the file. Two calls with the same key share one state, even from unrelated composables. Values must survive payload serialisation: no class instances, functions or symbols.

Pass the filter reactively, as query: { airport } or a getter URL, not a string built from airport.value. The auto-key hashes the URL and query, so each airport gets its own entry and a change starts a new fetch; watch: false opts out.

definePageMeta is a Nuxt compiler macro that attaches route metadata such as middleware, layout, validate or key to a page in app/pages/. The build hoists its object out of the component, so it can use imports and pure functions but not setup state.

In Nuxt 4, app/pages/account.vue plus an app/pages/account/ folder makes account.vue a parent route whose folder files become children. The parent must render <NuxtPage /> where the child appears, or /account/orders shows only the parent.

At runtime Nuxt maps each existing runtimeConfig key to an upper-snake-case NUXT_ variable, so public.siteUrl reads NUXT_PUBLIC_SITE_URL. process.env.SITE_URL in nuxt.config is read once at build time and frozen into the output.

Nuxt 4's <ClientOnly> renders its fallback (the #fallback slot, or fallback text in a span) on the server and again during hydration, then swaps in its default slot after mounting. It suits a browser-only widget inside an otherwise server-rendered page.

Two exports named useCart give Nuxt 4's auto-import two candidates for one name, so a page can get the other team's version. Rename by domain or import explicitly; imports.scan: false stops scanning your folders, and imports.autoImport: false turns injection off.

useNuxtApp() returns the current Nuxt app: vueApp, provided helpers, hooks, payload, ssrContext and isHydrating. On the server each request has its own app tracked implicitly; after an await in a plain function that tracking is lost, so the next Nuxt composable throws NUXT_E1001.

In Nuxt 4 getCachedData runs before every fetch, including refresh() and watcher runs, and any non-undefined return skips the request. The payload always holds the last result, so the refresh is served from cache. Return undefined when ctx.cause is refresh:manual or refresh:hook.

Nuxt 4 returns data as a shallowRef, so mutating nested properties triggers no update; replace the value or pass deep: true. data and error now start as undefined instead of null, so null checks never match; test status or supply a default.

Two, unless both pass the same explicit key, because useFetch auto-keys per call site. With a shared key, Nuxt 4 keeps one entry whose data, error and status refs both read; transform and default must match, and the entry is purged after its last consumer unmounts.

For one protected /account area, a named app/middleware/auth.ts set on account.vue with definePageMeta covers every /account child and skips public recipe pages. A .global file runs on every navigation, alphabetically before page middleware, and must exempt /login.

Export defineNuxtModule with meta (name, configKey, compatibility), defaults and a setup that registers runtime files with addPlugin, addImports, addComponent and addServerHandler. Options exist only at build time, so setup copies what runtime code needs into runtimeConfig.

A Nuxt plugin runs as the Nuxt app is created: on the server for every request, in the browser once per page load. A .client file name keeps it out of SSR, and returning { provide: { track } } exposes $track.

It got there through runtimeConfig.public, app.config, a module copying options into public config, or server code rendering it or storing it in payload state. Keep it a private runtimeConfig key read only by server code, which the browser calls.

On a Node server, Nitro caches rendered pages only for swr or cache rules; isr is left to hosting presets with a platform cache, so alone it caches nothing. Self-hosted, use swr: 3600; prerender suits a blog rebuilt on each publish.

With '/dashboard/**': { ssr: false }, Nuxt 4 answers dashboard URLs with an app shell: an empty #__nuxt root plus the optional loading template. Middleware, data fetching and rendering move to the browser, at the cost of indexable HTML and an early first paint.

A miss runs the handler and stores its response in Nitro's cache storage; a hit replays it without calling upstream. After 60 seconds the default swr: true serves the stale response while a background refresh replaces it.