Frontend

Nuxt

A full-stack Vue framework: SSR, file-based routing, auto-imports and the Nitro server engine.

Official siteRepository

What it is

Brothers Sebastien and Alexandre Chopin created Nuxt in 2016, modeled on Next.js but for Vue. It adds folder-based routing, server rendering and a conventional project structure to Vue.

Nuxt 3 is built on Vue 3, Vite and the Nitro server engine, which packages the app for many targets: Node.js, edge workers, static hosting. Components, composables and utilities are auto-imported.

There is a large module catalog (content, images, i18n, auth). Rendering modes are set per route: SSR, SSG, SPA or ISR.

Use it when

  • A Vue team that needs SSR, SEO and a quick start.
  • Content sites and blogs (with the Nuxt Content module).
  • You want to deploy to the edge or static hosting from one codebase.

Avoid it when

  • A small client-side widget: plain Vue with Vite is enough.
  • The team is not on Vue.

Key concepts

File-based routing
Files in pages/ automatically become routes.
Auto-imports
Components, composables and utilities are available without an explicit import.
Nitro
The server engine that packages the app for Node, edge and static.
useFetch / useAsyncData
Data fetching composables that work on server and client without duplicating the request.
Modules
Extend functionality by adding them in nuxt.config.

Example

A Nuxt page with useFetch.

Interview questions

  1. 1. What does Nuxt add to Vue?

    File-based routing, SSR and SSG, auto-imports, server endpoints, modules and a conventional project structure. In plain Vue you assemble that by hand.

  2. 2. What is Nitro?

    Nuxt's server engine that bundles the app into a portable build for Node.js, edge runtimes or static hosting. Server routes run in it too.

  3. 3. Why useFetch instead of fetch?

    useFetch makes the request on the server, passes the result to the client in the payload and does not duplicate the request after hydration. It also gives reactive pending and error.

  4. 4. How do you configure rendering per page?

    Through routeRules in nuxt.config: each path can specify SSR, prerender, SPA or cache with revalidation.

Comparisons with this technology

Related technologies

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).

Explore the platform