What Is Nuxt? The Vue Framework Explained

What is Nuxt, and why do so many Vue teams reach for it? Vue renders your interface, but a production app needs more: routing, server rendering, data loading, an API layer and a deployment story. Nuxt is the framework that supplies all of that on top of Vue. This guide explains how it works, what teams build with it, and what changed between Nuxt 2, 3 and 4.

What Is Nuxt.js?

Nuxt.js is an open-source framework built on Vue.js for creating full-stack web applications and websites. It adds server-side rendering, static generation, file-based routing, auto-imports and a built-in server engine called Nitro, so a Vue project is ready for production without assembling those pieces yourself.

That's the short answer to "what is Nuxt js". The longer answer is that Nuxt makes decisions you would otherwise make by hand. A plain Vue app needs Vue Router, a build tool, a way to fetch data, a plan for SEO and a server if you want pages rendered before they reach the browser. Nuxt picks sensible defaults for each of those and wires them together.

The project started in October 2016 and was originally written as "Nuxt.js". The official name today is just Nuxt, but both spellings refer to the same framework. Nuxt is MIT-licensed, has more than 61,000 stars on GitHub, and the nuxt package was downloaded about 3.3 million times in the last week of October 2026. The current major version is Nuxt 4.

Is Nuxt Based on Vue?

Yes, Nuxt is based on Vue. It isn't a fork or a separate language. Every page, layout and component in a Nuxt app is a Vue single-file component, written with the same templates, props and Composition API you would use in any Vue project. If you're new to Vue itself, start with our guide What is Vue.js, then come back here.

The relationship is similar to the one between a library and the framework built around it. Vue handles reactivity and rendering components to the DOM. Nuxt decides when and where that rendering happens (on the server, at build time or in the browser) and adds everything around it. It generates Vue Router routes from your files, so there's no hand-written routes array. Vite comes configured, with code splitting per page. Composables such as useFetch load data on the server and hand it to the browser, and API endpoints live in the same project, running on Nitro.

Because Nuxt is Vue underneath, the Vue ecosystem works inside it. Pinia, VueUse, component libraries like PrimeVue and Nuxt UI, and the Vue DevTools all work in Nuxt projects. Moving an existing Vue codebase to Nuxt is mostly about restructuring files and routes, not rewriting components.

Is Nuxt a Frontend Framework?

If you're asking whether Nuxt is a frontend framework, the honest answer is: mostly, but not only. Nuxt started as a frontend framework for server-rendering Vue apps, and the part most developers touch every day is still the frontend: pages, components and layouts.

Since Nuxt 3, though, every Nuxt app also ships with a server. That server runs on Nitro, an engine built by the Nuxt team, and it does two jobs. First, it renders your Vue pages to HTML on request. Second, it runs any API routes you add under the server/ directory. A file like server/api/products.get.ts becomes a GET /api/products endpoint, with no Express setup or separate backend repo needed.

That makes Nuxt a full-stack framework. You can use it as a pure frontend that talks to an existing backend, or as a full-stack app that reads from a database directly. Nitro deploys the same code to Node.js servers, serverless platforms like Vercel and Netlify, or edge runtimes like Cloudflare Workers, using deployment presets.

How Nuxt.js Works

Nuxt js works by taking your Vue files, a config file and a few naming conventions, and building an app that can render on the server, in the browser or at build time. Four pieces do most of the work. If rendering terms are new to you, our article on SSR, SSG and CSR in Vue explains them in depth.

Rendering Modes: SSR, SSG, SPA and Hybrid

By default, Nuxt uses universal rendering (SSR): the server runs your Vue components, sends full HTML to the browser, and then Vue "hydrates" that HTML so it becomes interactive. Visitors see content immediately, and crawlers get a complete page.

You can change that globally or per route. For static site generation (SSG), nuxt generate prerenders every page to HTML at build time. This site, epicmax.co, is a Nuxt 4 app deployed exactly that way. Set ssr: false and Nuxt behaves like a classic single-page app (SPA). And with hybrid rendering, route rules give each section of the site its own mode:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/products/**': { swr: 3600 },
    '/admin/**': { ssr: false },
  },
})

Here the homepage is built once, product pages are rendered on demand and cached for an hour, and the admin area renders only in the browser.

File-Based Routing and Auto-Imports

Every .vue file in app/pages/ becomes a route. pages/about.vue is /about, and pages/blog/[slug].vue matches any blog post URL. You don't write a router config. Nuxt also auto-imports components, composables and Vue APIs, so ref, computed and your own useCart() are available without import lines, and fully typed.

Data Fetching

useFetch and useAsyncData load data during server rendering and send the result to the browser in the page payload, so the request isn't repeated on hydration. $fetch handles calls triggered by user actions, such as submitting a form.

<script setup lang="ts">
const { data: products, status } = await useFetch('/api/products')
</script>

The composables return reactive data, status and error refs, and they refetch when a reactive parameter changes. In Nuxt 4, calls that use the same key share one copy of the data, so two components asking for the same product list don't trigger two requests.

Nitro Server Engine and Server Routes

Nitro powers both server rendering and your API. Besides the server/api routes, it provides server middleware, storage drivers and caching. When you build, Nitro outputs a small, self-contained server bundle for the platform you target.

Because pages and API routes live in one Nuxt.js project, the types flow between them: when a page calls useFetch('/api/products'), Nuxt knows the shape of the response from the server route. That's one of the reasons teams pick Nuxt.js for full-stack work instead of pairing Vue with a separate Node.js API.

Key Features of the Nuxt Framework

Developers who ask what is the Nuxt framework really adding on top of Vue usually mean the features beyond rendering. The biggest one is modules. The Nuxt module directory lists more than 300 community and official modules, and most install with one line in nuxt.config.ts: Nuxt Content for Markdown sites, Nuxt Image for optimized images, Nuxt UI for components, @nuxtjs/i18n for translations, @nuxtjs/seo for sitemaps and structured data.

Layers go a step further. A Nuxt app can extend another Nuxt project and inherit its components, pages and config, so teams use Nuxt layers to share a design system or a base app across several products.

The rest you get without asking:

• Generated TypeScript types for routes, auto-imports, API responses and config
• useSeoMeta and useHead for titles, descriptions and Open Graph tags, rendered on the server
• Code splitting per route, lazy components with the Lazy prefix, and payload extraction
• A Vite dev server with hot module replacement, plus Nuxt DevTools for inspecting pages, modules and server routes
• Deployment presets that ship the same code to Node.js, serverless, edge or static hosting

Is Nuxt a framework in the strict sense? Yes. It controls the app's structure and lifecycle, and you plug your code into its conventions. That's the trade: you give up some freedom in how files are organized, and in return you skip weeks of setup and get a structure every Nuxt developer already knows.

What Is Nuxt Used For?

So what is Nuxt used for in practice? Mostly for projects where Vue alone would leave you building infrastructure: pages that must rank in search, apps that need fast first loads, and products with both public and private areas. Four kinds of projects come up again and again.

E-commerce Storefronts

Online stores need product pages that load fast and get indexed, plus a cart and checkout that behave like an app. Nuxt does both: server-rendered or cached product pages for search, and client-side interactivity after hydration. It pairs well with headless commerce backends. We walked through building an e-commerce store with Medusa and Nuxt 4, from setup to product management.

SaaS Products and Dashboards

A typical SaaS product has a public marketing site and a logged-in app. With route rules, one Nuxt project can prerender the marketing pages and render the dashboard client-side only. Server routes handle auth callbacks, webhooks and API proxies without another service. For apps with real-time features, Nuxt works alongside WebSockets and streaming. Our social network built on Vue and Nuxt is one example: a TikTok-inspired platform with video streaming and live messaging.

Content Sites, Blogs and Docs

Nuxt Content turns Markdown and YAML files into typed collections you can query from components. Combined with static generation, that gives you a fast site with no database. Documentation sites, company blogs and knowledge bases fit this model well. This blog is one: each article is a Markdown file in the repo, rendered by Nuxt at build time.

Marketing Sites and Landing Pages

Marketing pages need good Core Web Vitals, clean meta tags and quick changes. Nuxt prerenders them to static HTML, manages SEO tags per page, and with Nuxt Image serves resized, modern image formats. Developers can add new landing pages by dropping a file into pages/ or a content folder.

Marketing sites also tend to grow into something bigger: a pricing calculator, a sign-up flow, a customer portal. With Nuxt.js, those features land in the same project instead of a second app, and the static pages stay static while the new parts render on demand.

Nuxt 2, Nuxt 3 and Nuxt 4

Nuxt has had three major lines in active use. Nuxt 2 was built on Vue 2 and webpack and reached end of life on June 30, 2024. If you still run a Nuxt 2 app, our Nuxt 4 migration guide and Nuxt migration services cover the upgrade path.

What Is Nuxt 3?

What is Nuxt 3? It was a full rewrite, released on November 16, 2022. It moved Nuxt to Vue 3, the Composition API, Vite and TypeScript, and introduced the Nitro server engine, hybrid rendering and useFetch. Almost everything modern Nuxt does started in Nuxt 3. Nuxt 3 reached end of life on July 31, 2026, so it no longer gets bug fixes or security patches.

What Changed in Nuxt 4

Nuxt 4 came out on July 15, 2025. After the Nuxt 3 rewrite, this one is deliberately boring, which is a compliment. Nuxt 3 projects could try most of it early by setting compatibilityVersion: 4, and the old folder layout still works.

The visible change is the new app/ directory. App code moves into app/, separate from server/, content/ and config, though projects with the old layout keep working. Data fetching got smarter: useFetch and useAsyncData calls with the same key now share data, clean up when no component uses them, and return a shallowRef for better performance. TypeScript now runs as separate projects for app, server and shared code, so types are more accurate, and the CLI starts faster.

Nuxt Pros and Cons

The pros matter most for public-facing apps. If search traffic, first-load speed or sharing links on social media matter to your product, Nuxt gives you server rendering without building your own SSR setup, and that alone can save weeks.

The cons are real but manageable. SSR adds a category of bugs that pure client apps don't have: code that touches window during server rendering, or hydration mismatches when the server and browser render different HTML. Teams new to Nuxt hit these early, then learn the patterns. Auto-imports can also make it less obvious where a function comes from, though the generated types and IDE support close most of that gap.

For an internal tool behind a login with no SEO needs, plain Vue with Vite is often simpler, and Nuxt's extra concepts don't pay off. For anything public, Nuxt is usually the better starting point.

How to Get Started With Nuxt

You can have a Nuxt app running in a few minutes:

1. Install a current LTS version of Node.js.
2. Run npm create nuxt@latest my-app and follow the prompts to pick a package manager and optional modules.
3. Run cd my-app and npm run dev. The app opens at http://localhost:3000.
4. Create app/pages/about.vue with a template. The /about route exists as soon as you save.
5. Add server/api/hello.ts that returns JSON, then call const { data } = await useFetch('/api/hello') in a page.
6. Install official modules with npx nuxt module add image (or content, ui).
7. Run npm run build for a server build or npm run generate for a static site, then deploy to your host.

That's the whole loop. The official docs at nuxt.com go deeper on each step, and Nuxt DevTools shows you what Nuxt generated behind the scenes.

Conclusion

Nuxt is the framework that turns Vue into a complete way to build and ship web apps. It adds server rendering, routing, data fetching and a backend layer, and it lets each route pick the rendering mode that suits it. For public sites, storefronts and SaaS products, that usually means faster pages, better SEO and less setup.

At Epicmax, we have built client projects with Nuxt since 2017, and we are an official Nuxt partner. If you're planning a new app or an upgrade, our Nuxt development services can help.

FAQs

Is Nuxt a framework or a library?

Nuxt is a framework. Vue is the library that renders components, and Nuxt is the framework around it that decides how the app is structured, rendered, routed and deployed. You write Vue components, and Nuxt calls them at the right time.

Is Nuxt the same as Next.js?

No. Next.js is a React framework maintained by Vercel, and Nuxt is a Vue framework maintained by its own open-source team. They solve the same problems (server rendering, routing, full-stack features), but you write React with Next.js and Vue with Nuxt. Our Nuxt vs Next.js comparison covers the differences in detail.

Do I need to know Vue to use Nuxt?

Yes, at least the basics. Every page and component in a Nuxt app is a Vue single-file component, so you need templates, props and the Composition API. You don't need Vue Router or a separate build setup first, because Nuxt handles those for you.

Can Nuxt be used as a backend?

For many apps, yes. Files in the server/ directory become API endpoints that run on the Nitro server engine, so you can read a database, call third-party APIs and handle forms without a separate service. Large systems with heavy business logic usually still keep a dedicated backend and use Nuxt as the frontend and API layer in front of it.

Is Nuxt good for SEO?

Yes. With server-side rendering or prerendering, search engines and AI crawlers get full HTML on the first request instead of an empty page that needs JavaScript. Nuxt also ships useSeoMeta and useHead for titles, descriptions and Open Graph tags, and official modules add sitemaps and structured data.

Is Nuxt free and open source?

Yes. Nuxt is released under the MIT license, so you can use it in commercial projects for free. The source code lives on GitHub in the nuxt/nuxt repository, which has more than 61,000 stars.

Who maintains Nuxt?

Nuxt is maintained by an open-source core team led by Daniel Roe, with more than 400 contributors on GitHub. NuxtLabs, the company founded by Nuxt co-creator Sébastien Chopin, joined Vercel in July 2025, and Nuxt stayed open source under the MIT license.