Skip to content
English
Back to directory

nuxt.com

200 OK

Build Vue websites and applications with routing, server logic and flexible rendering

Developer ToolsNuxtVercel
Summary

Nuxt turns Vue into a full-stack framework with file-based routing, server endpoints, and flexible rendering. It suits teams that value conventions but can manage server, browser, and hosting tradeoffs.

Last checked:

Core concepts

  • Full-stack framework built on Vue: Nuxt retains Vue's component model while adding routing, rendering, server features, data conventions, development tools, and deployment support.

  • File-based application structure: Recognised pages, layouts, middleware, components, composables, plugins, and server directories connect files to framework behaviour.

  • Multiple rendering modes: A project can use universal rendering, client-side rendering, prerendering, or a hybrid combination chosen by route.

  • Route-level control: Route rules can configure prerendering, redirects, caching, stale-while-revalidate behaviour, and client-only sections, with some features depending on the deployment platform.

  • Nitro server engine: Nitro supports server rendering, API handlers, middleware, server plugins, prerendering, and output for supported deployment environments.

  • Optional content layer: Nuxt Content adds file-based content, typed collections, queries, navigation generation, and Vue components in Markdown through MDC.

Compare the subject with other published sites in the same category.

All alternatives

Build Vue websites and applications with routing, server logic and flexible rendering

Nuxt is a free and open-source framework for building full-stack websites and applications with Vue. It supplies routing, rendering, server features, data-handling conventions, development tools, and deployment support so a team does not have to assemble those foundations separately.

The primary subject here is Nuxt, the framework. nuxt.com is its official website and documentation hub, where developers can study the framework, modules, team, and community resources.

What is Nuxt about?

Nuxt is about turning Vue components into a structured application that can run across the server and browser. A Nuxt project can deliver server-rendered HTML, behave as a client-side application, generate static pages, or apply different rendering and caching rules to different routes.

Its scope is broader than static-site generation. Nuxt can support a content website, an authenticated application, server endpoints, or a product that combines all three.

Nuxt in one minute

  • Vue supplies the interface model. Developers still write Vue components, templates, composables, and reactive state.
  • Nuxt supplies application structure. Recognised files and directories define pages, layouts, middleware, plugins, utilities, and server handlers.
  • Universal rendering is the default. The server can produce the first HTML response before Vue activates interactive behaviour in the browser.
  • Rendering can change by route. Static, cached, server-rendered, and client-only sections can coexist.
  • Nitro powers the server layer. It handles server rendering, API endpoints, middleware, and deployment-oriented output.
  • Nuxt Content is optional. Teams can add a file-based content system without making it a requirement for every Nuxt project.

How does Nuxt relate to Vue?

Vue is the user-interface framework beneath Nuxt. Nuxt keeps Vue's component model and adds the surrounding decisions needed to turn components into a routed, deployable website or application.

A developer working in Nuxt still uses Vue concepts such as single-file components, props, events, composables, and reactivity. Nuxt adds conventions for where those components live, how URLs reach them, when data is fetched, and whether code executes on the server, in the browser, or in both places.

Concern Vue's role Nuxt's role
Interface Components, templates, and reactivity Organises components into pages and layouts
Navigation Integrates with routing tools Creates routes from files in app/pages/
Initial HTML Provides rendering primitives Configures server rendering and prerendering
Server logic Outside the core UI-library scope Adds Nitro endpoints, middleware, and server utilities
Deployment Chosen by the application Produces output through Nitro deployment presets

This integrated structure reduces initial configuration and gives contributors a shared project vocabulary. The cost is that developers must understand Nuxt-specific behaviour, including auto-imports, directory scanning, hydration, and server-client boundaries.

How do files become routes and application features?

Nuxt uses conventions to connect the filesystem to application behaviour. A Vue file inside app/pages/ becomes a route, while names containing brackets can represent dynamic URL parameters.

The same approach extends beyond pages. Layouts wrap related views, route middleware runs around navigation, plugins configure the Vue application, and composables hold reusable stateful logic. Nuxt can auto-import supported components, composables, and utilities from recognised locations.

Common directories and their jobs

Directory Public purpose
app/pages/ Creates application routes from Vue files
app/layouts/ Defines reusable page shells
app/components/ Stores reusable Vue interface components
app/composables/ Holds reusable Vue composition logic
app/middleware/ Runs logic during route navigation
server/api/ Creates server endpoints under /api
server/routes/ Creates server routes without the /api prefix
shared/ Holds code intended for both the Vue app and Nitro server

File routing saves teams from maintaining a separate route registry for ordinary pages. It also means that moving or renaming a file can change a public URL, so route structure deserves the same review as application code.

Auto-imports remove repetitive statements, but their origin may be unclear to a new contributor. Explicit naming, editor support, and short project documentation can make the convenience easier to reason about.

Which rendering modes does Nuxt support?

Nuxt supports universal rendering, client-side rendering, prerendering, and hybrid rendering. These modes describe when HTML is produced and how much work remains for the server or browser.

Universal rendering is the default documented model. Nuxt renders the initial HTML on the server, sends it to the visitor, and then hydrates the page so Vue can handle interaction in the browser.

Mode What happens Suitable examples Important tradeoff
Universal HTML is produced for the initial request and then hydrated Public product pages or data-backed applications Server and browser code must behave consistently
Client-side The browser renders the application shell and interface Private tools dominated by browser state Initial HTML may contain less useful content
Prerendered HTML is generated ahead of requests Documentation, guides, and stable marketing pages Builds must discover or receive every intended route
Hybrid Different paths receive different rules A static publication with a dynamic account area More route-specific behaviour must be tested and maintained

Server-rendered HTML can improve how quickly useful content becomes available, but it does not guarantee fast pages, good search visibility, or small JavaScript bundles. Component weight, data access, caching, hosting, and implementation quality still determine the result.

Static output has similar limits. Prerendering removes request-time rendering for selected pages, but large route collections can lengthen builds, and changing content may require regeneration unless another supported strategy is configured.

What are route rules and hybrid rendering?

Route rules let a Nuxt project assign behaviour to matching URL patterns. They make hybrid rendering possible because one section can be prerendered while another remains dynamic or client-rendered.

Documented rules include prerendering, redirects, disabling server-side rendering for selected paths, caching, stale-while-revalidate behaviour, and incremental regeneration on supported platforms. Some capabilities depend on the deployment preset and hosting environment.

A practical route map

  • A documentation section might use prerendering because its pages change through an editorial release.
  • A product catalogue might use a cache or stale-while-revalidate rule when its data changes more frequently.
  • An account dashboard might use client-side rendering because its content is private and highly interactive.
  • An API path might receive caching or cross-origin rules independently of page routes.
  • A retired URL might receive a redirect to its replacement.

Route rules are powerful when they express a small number of clear content and application categories. A growing collection of exceptions can make freshness, invalidation, and runtime behaviour difficult to predict.

Incremental regeneration deserves a deployment check. Nuxt documents ISR-oriented route rules, but their exact behaviour depends on the selected platform integration rather than being identical on every host.

What does Nitro provide?

Nitro is Nuxt's server engine. It supports server-side rendering, prerendering, API handlers, middleware, server plugins, and output intended for different server or edge environments.

Files in server/api/ become endpoints with an /api prefix. Files in server/routes/ create routes without that prefix, while server middleware can inspect or extend the request context before handlers run.

Keep these execution boundaries visible

  1. Server-only code can work with private credentials and trusted services, but secrets must never enter browser bundles.
  2. Client-only code can use browser APIs, but visitors can inspect everything delivered to their devices.
  3. Shared code must be safe and compatible in every runtime where Nuxt executes it.
  4. External systems such as databases, queues, identity providers, and independent APIs retain their own security and operational requirements.

Keeping frontend and small server handlers in one project can simplify development. It does not mean every backend belongs inside Nuxt, nor does Nitro remove the need to design authentication, validation, storage, observability, or failure handling.

Deployment presets adapt Nitro output to supported environments. Teams should test the actual target because runtimes differ in available APIs, process lifetime, caching integration, and operational constraints.

Is Nuxt suitable for content websites?

Yes. Nuxt is useful for documentation, publishing, marketing, and other content-heavy websites, especially when those pages must share Vue components with interactive product features.

A team can obtain content from an API, a separate content management system, or local files. Nuxt Content is an optional module for the local-file approach.

Nuxt Content documents support for Markdown, YAML, CSV, and JSON sources. It can organise material into typed collections, query content, generate navigation data, and use MDC to place Vue components within Markdown.

Where that combination helps

  • Product documentation with interactive code examples or calculators.
  • A publication that shares navigation and design components with a Vue application.
  • A marketing site containing account, search, or personalisation features.
  • An internal knowledge base built from structured content collections.
  • A multi-section property requiring different rendering rules for editorial and application routes.

Nuxt Content is not a hosted editorial service by itself. Teams still need to evaluate author permissions, review workflows, media management, localisation, previews, and publishing controls when non-developers maintain the material.

For a modest documentation site, local Markdown may be enough. A large editorial organisation may prefer an external content platform while continuing to use Nuxt for presentation and rendering.

Who maintains Nuxt and where does its community meet?

According to the official team page reviewed on 27 August 2026, development of Nuxt and its ecosystem is led by an international team. The page lists core and ecosystem teams; this team-level attribution is more reliable than inferring a sole founder from repository history or individual profiles.

The maintained nuxt/nuxt GitHub repository contains the framework source, issue tracker, contribution material, and release history. Repository activity can help developers inspect implementation and maintenance, but it should not be treated as a promise about future schedules.

The official community help page identifies two relevant support paths:

  • Discord is the official path for real-time community conversation and help.
  • GitHub Discussions is the official path for questions that benefit from a searchable, asynchronous thread.

Nuxt explains that community participants volunteer their help. Projects requiring guaranteed response times, private architecture work, or contractual support should evaluate professional support separately.

When is Nuxt a good fit?

Nuxt is a strong candidate when Vue is already the preferred component model and the project needs more than a thin browser interface. Its conventions are particularly valuable when public pages, interactive features, and server handlers must share one application structure.

Consider Nuxt when

  • The team already works effectively with Vue.
  • Public routes benefit from server-produced or prerendered HTML.
  • Frontend pages and modest server endpoints should live together.
  • Content and application sections need shared layouts and components.
  • Different route groups require different rendering or caching policies.
  • Contributors prefer a documented convention over assembling many separate tools.

Compare other approaches when

  • The site is almost entirely static and needs little Vue interactivity.
  • The team wants a smaller client-side layer over an established independent backend.
  • Developers require a highly custom structure with few framework conventions.
  • The intended runtime cannot provide the required server or cache behaviour.
  • The project's main application expertise lies in another component ecosystem.

Nuxt's breadth is useful only when the project needs it. A small brochure site can use Nuxt, but that does not establish that its server engine and application conventions are the simplest choice.

What should a team test before choosing Nuxt?

Build one representative vertical slice and deploy it to the intended environment. Include real content, a meaningful interactive component, a server request, and the expected authentication or data boundary.

Use this evaluation sequence:

  1. Classify routes. Separate editorial, public dynamic, private, and server-endpoint paths.
  2. Assign rendering intentionally. Record why each class is universal, client-side, prerendered, or hybrid.
  3. Test the browser payload. Server rendering alone does not control hydration or JavaScript cost.
  4. Use realistic content volume. Measure builds and queries with credible page and collection counts.
  5. Verify deployment features. Confirm the selected preset supports the required caching and regeneration semantics.
  6. Review runtime boundaries. Check that server-only values cannot enter client code.
  7. Test contributor comprehension. Ask a new developer to trace routes, auto-imports, data flow, and server handlers.

The practical question is not whether Nuxt can build the project. It is whether Nuxt's Vue integration, conventions, server layer, and route-level controls simplify the project's dominant work enough to justify their added concepts.

A successful response is not a guarantee of safety. Measurements describe one observation in time.

Primary sources

  1. 01Nuxt introduction (opens in a new tab)
  2. 02Nuxt routing (opens in a new tab)
  3. 03Nuxt rendering modes (opens in a new tab)
  4. 04Nuxt prerendering (opens in a new tab)
  5. 05Nuxt server and Nitro (opens in a new tab)
  6. 06Nuxt server directory (opens in a new tab)
  7. 07Nuxt Content module (opens in a new tab)
  8. 08Nuxt Content installation and collections (opens in a new tab)
  9. 09GitHub: Nuxt framework repository (opens in a new tab)
  10. 10Nuxt team (opens in a new tab)
  11. 11Nuxt community help (opens in a new tab)

Common questions

Practical answers about the product and how it works.

What is Nuxt?

Nuxt is a free and open-source framework for building full-stack websites and applications with Vue. It adds file-based routing, rendering options, project conventions, development tooling, and a Nitro-powered server layer.

Is Nuxt the same as Vue?

No. Vue provides the component and reactivity model used to create interfaces. Nuxt builds on Vue by supplying application structure, routing, server rendering, server routes, data conventions, and deployment-oriented tooling.

Does every Nuxt page use server-side rendering?

No. Universal rendering is the documented default, but Nuxt also supports client-side rendering, prerendering, and hybrid configurations. Route rules can assign different behaviour to different URL patterns.

Can Nuxt generate a static website?

Yes. Nuxt can prerender selected routes or generate static output for a site. Teams must ensure that the build discovers every intended route and should test build time with realistic content volume.

What is hybrid rendering in Nuxt?

Hybrid rendering applies different rendering or caching rules to different routes. A project can prerender one section, render another on request, and make a private area client-only, subject to the capabilities of its deployment preset and host.

What does Nitro do in a Nuxt project?

Nitro is Nuxt's server engine. It supports server rendering, prerendering, API endpoints, middleware, server plugins, route rules, and deployment output for supported runtime environments.

Can Nuxt be used for documentation and publishing?

Yes. Content routes can use Nuxt's rendering options, and the optional Nuxt Content module supports file-based Markdown and structured data, typed collections, content queries, navigation generation, and Vue components in Markdown through MDC.

Continue exploring

More published records in Developer Tools.

View all alternatives

How Astro turns content into HTML and adds interaction selectively

Developer ToolsTailwind CSS

Gatsby connects React websites to structured content and flexible rendering

Developer ToolsGoogle Analytics

Next.js brings routing, rendering, and server features to React

Developer ToolsGoogle AnalyticsNext.js