Nuxt.js

Nuxt is the full-stack framework for Vue. It adds file-based routing, server-side rendering, static generation, data fetching that avoids double requests, a built-in server engine (Nitro) for API routes, SEO utilities, and a large module ecosystem. Conventions and auto-imports mean most apps need very little configuration.

Nuxt's standout feature is hybrid rendering: each route can be server-rendered, statically generated, incrementally regenerated, cached at the edge, or rendered only on the client, configured with a few lines of route rules. Nitro then builds the app for Node, serverless platforms, edge runtimes, or static hosting.

TL;DR

Quick Example

A product page that loads data on the server, sets SEO metadata, and is cached with stale-while-revalidate:

Core Concepts

Directory Conventions

Data Fetching

useFetch(url) and useAsyncData(key, fn) run during SSR, serialize the result into the page payload, and hydrate on the client without refetching. They return reactive data, pending/status, error, and refresh. $fetch is the plain fetch utility for event handlers and actions. Using raw fetch in setup causes the request to run twice (server and client).

Rendering Modes and Route Rules

Nitro Server Engine

Nitro powers server/ handlers with file-based API routes, storage and cache layers, scheduled tasks, and deployment presets (Node, Vercel, Netlify, Cloudflare Workers/Pages, AWS Lambda, Deno, Bun, static). Server routes share types with the front end through auto-generated typings.

Modules

Modules extend Nuxt with one line in nuxt.config: @nuxt/image, @nuxt/content (Markdown CMS), @pinia/nuxt, @nuxtjs/i18n, @nuxt/ui, @sidebase/nuxt-auth, and hundreds more.

Runtime Config

runtimeConfig values are set from environment variables at runtime (NUXT_DB_URL). Top-level keys are server-only; public keys reach the browser.

Best Practices

Use useFetch/useAsyncData in Components

They prevent double fetching and handle SSR payload transfer. Give useAsyncData stable, unique keys.

Choose Rendering Per Route

Prerender static pages, cache semi-static ones with SWR, and render private dashboards client-side.

Keep Secrets Server-Side

Put credentials in private runtime config and access them only in server/ code.

Protect Routes With Middleware and Server Checks

Client route middleware improves UX, but always enforce authorization in server handlers too.

Lazy-Load Heavy Components

Use <LazyChart /> or defineAsyncComponent for components not needed on first render.

Common Mistakes

Plain fetch in setup

The request runs on the server and again during hydration. Use useFetch.

Non-Serializable Data in Payloads

Returning class instances, functions, or huge objects from data fetching bloats the payload or fails to serialize. Return plain data and pick only needed fields.

Browser APIs During SSR

window and localStorage don't exist on the server. Access them in onMounted, <ClientOnly>, or with import.meta.client checks.

Relying Only on Client Middleware for Auth

Client middleware can be bypassed; API routes must check permissions.

Comparison

FAQ

What is Nuxt?

A full-stack framework for Vue that adds file-based routing, server-side rendering, static generation, API routes, and deployment tooling on top of Vue.

What's the difference between useFetch and $fetch?

useFetch is a composable for components that fetches during SSR and transfers data to the client without refetching. $fetch is a plain HTTP utility for event handlers, server code, and actions.

Can Nuxt generate a static site?

Yes. Run nuxi generate or prerender specific routes with route rules, and deploy the output to any static host.

Nuxt or Next.js?

Choose Nuxt if your team prefers Vue and wants strong conventions, auto-imports, and flexible deployment through Nitro. Choose Next.js for React.

Related Topics

References