What is Nuxt?

Vue gives you components, reactivity, and the composition API — but a real application needs more than that. It needs routing between pages, a decision about where rendering happens (browser or server), a way to fetch data without re-fetching it on every navigation, and a sensible project layout that doesn't have to be reinvented per project. Nuxt is a meta-framework built on top of Vue that supplies all of that out of the box.

If you've used Vue with Vite and vue-router wired up by hand, think of Nuxt as taking every one of those setup decisions and turning them into a convention. Put a file in pages/, and it's a route. Put a component in components/, and it's available everywhere with no import. Nuxt isn't a different language or a replacement for Vue — every .vue file you write still uses the same template syntax, ref, computed, and <script setup> you already know.

A plain Vue app vs. a Nuxt app

A standalone Vue app starts by manually mounting a root component:

// main.js — plain Vue + Vite
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

You wire up vue-router, configure code-splitting, and decide how to render on the server yourself if you need SSR. In Nuxt, there's no main.js at all — the framework owns the entry point:

<!-- app.vue -->
<template>
  <NuxtPage />
</template>

<NuxtPage /> renders whichever page matches the current URL, based on the files inside pages/. You never touch a router configuration file for basic routing.

What Nuxt actually adds

• File-based routing — a file's path under pages/ becomes its URL.
• Rendering flexibility — the same app can render on the server (SSR), pre-render at build time (SSG), or run client-only, per route if needed.
• Auto-imports — components, composables, and Vue APIs like ref and computed are available without an import statement.
• A server layer (Nitro) — the server/ directory lets you write backend API routes in the same project, deployed alongside your frontend.
• Sensible defaults for SEO, performance, and deployment — meta tags, code-splitting, and adapters for hosts like Vercel or Netlify are handled for you.

Why this matters in practice

Every one of these is something teams end up building by hand in a plain Vue setup — a router config, a data-fetching convention, a decision about SSR, an Express server for API routes. Nuxt's value isn't a new mental model on top of Vue; it's removing the boilerplate around Vue so you can spend your time on the app itself. The rest of this course walks through each of these pieces: routing, data fetching, the server layer, and the composables Nuxt adds alongside Vue's own.