Nuxt.js

Nuxt is the full-stack framework for Vue. It supplies file-based routing, server rendering, data fetching, server API routes, and a production build pipeline (Nitro) — so you get SEO-friendly Vue apps without stitching tools together.

If your app is purely client-side and SEO doesn't matter, plain Vue + Vite is simpler. Reach for Nuxt when you need server rendering, conventions for routing and data, or server routes alongside your UI.

TL;DR

• File-based routing from pages/, with shared shells in layouts/.
• Render as SSR, SSG, or hybrid per route.
• Server routes (server/api/) provide a backend in the same project.
• Use useFetch/useAsyncData for SSR-aware data fetching.
• Nitro powers builds for Node, serverless, and edge targets.

Quick Example

useFetch runs on the server for the initial render, then hydrates on the client — no double fetch:

Core Concepts

• Pages & layouts — pages/ defines routes; layouts/ provides shared shells.
• Composables — reusable logic in composables/ (auto-imported).
• Server routes — API handlers in server/api/ run on the server only.
• Nitro — the server engine that builds for many deploy targets.
• Rendering modes — SSR, SSG (prerender), or hybrid per route.

Best Practices

• Use useFetch for straightforward SSR-aware fetching and useAsyncData when you need caching/transformation control.
• Keep secrets in server routes (server/api/), never in client code.
• Prerender (SSG) content-heavy pages for speed and SEO; reserve SSR for dynamic ones.
• Prefer typed schemas for API responses and handle empty/error states explicitly.

Common Mistakes

Browser APIs during SSR

Double-fetching in setup

FAQ

Do I need Nuxt, or just Vue?

Use Nuxt when you need SSR/SSG (for SEO or fast first loads), routing and data-fetching conventions, or server routes. For a purely client-side app where SEO is irrelevant, plain Vue + Vite is lighter and simpler.

useFetch or useAsyncData?

useFetch is the convenient default — an SSR-aware wrapper for fetching a URL. useAsyncData gives you more control over the key, caching, and transforming the result (and pairs with any async function, not just a URL).

What is Nitro?

Nitro is Nuxt's server engine. It builds your server routes and SSR output into a portable bundle that can deploy to Node, serverless functions, or edge runtimes — so the same app runs across many hosts.

SSR or SSG with Nuxt?

Prerender (SSG) pages that are the same for all users and change rarely — fastest and cheapest to serve. Use SSR for dynamic or personalized pages. Nuxt lets you choose per route via route rules.

Related Topics

• Vue.js — The underlying framework
• Next.js — The React equivalent
• SvelteKit — The Svelte equivalent
• SEO for SPAs — Why SSR/SSG matters
• Data Fetching — Client-side caching patterns

References

• Nuxt — Documentation
• Nuxt — Data fetching
• Nuxt — Server engine (Nitro)
• Nuxt — Rendering modes