Nuxt: The Vue Full-Stack Framework, Features, Deployment

What is Nuxt?

Nuxt is the official full-stack framework for Vue.js. Where Vue is the UI library, Nuxt is everything else needed to build a production web app: routing, server-side rendering (SSR), static site generation (SSG), API endpoints, build tooling, and deployment. It's analogous to Next.js for React or SvelteKit for Svelte.

Nuxt 3 (released 2022, current major version) is built on Vue 3, Vite, and the Nitro server engine. Nitro deploys to virtually anywhere — Node.js, AWS Lambda, Cloudflare Workers, Vercel, Netlify, Deno Deploy — with zero config changes.

Why Nuxt?

• Conventions over config. File-based routing, auto-imports, layout system.
• Universal rendering. SSR, SSG, SPA, hybrid — per route.
• Nitro engine. One framework deploys to any platform.
• Auto-imports. Components, composables, utilities — no import statements.
• TypeScript first-class. Auto-typed routes, server APIs.
• Vue ecosystem. All Vue libraries work; Pinia for state, VueUse for composables.
• Nuxt Modules. Plug-and-play: i18n, content, image, auth, etc.
• Vite dev server. Fast HMR, modern ESM.

Nuxt project structure

my-app/
├── pages/                 # File-based routing
│   ├── index.vue          # /
│   ├── about.vue          # /about
│   └── blog/
│       ├── index.vue      # /blog
│       └── [slug].vue     # /blog/:slug
├── components/            # Auto-imported components
├── composables/           # Auto-imported composables
├── server/
│   ├── api/               # API endpoints
│   │   └── posts.get.ts   # GET /api/posts
│   └── middleware/
├── layouts/
│   └── default.vue
├── public/                # Static assets
├── nuxt.config.ts
└── app.vue                # Root component

Routing in Nuxt

File-based: every .vue file in pages/ becomes a route automatically.

// pages/blog/[slug].vue
<script setup lang="ts">
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
</script>

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.body"></div>
  </article>
</template>

Server API routes

// server/api/posts/[slug].get.ts
export default defineEventHandler(async (event) => {
  const slug = getRouterParam(event, 'slug');
  const post = await db.post.findUnique({ where: { slug } });
  if (!post) throw createError({ statusCode: 404, message: 'Not found' });
  return post;
});

File naming: posts.get.ts, posts.post.ts, [id].delete.ts — HTTP method via filename.

Data fetching

Rendering modes

// nuxt.config.ts
export default defineNuxtConfig({
  // Universal mode (SSR + hydration) — default
  ssr: true,

  // Or pure SPA
  // ssr: false,

  // Or static (SSG) — generated at build
  // nitro: { preset: 'static' }

  // Per-route control
  routeRules: {
    '/': { prerender: true },          // SSG
    '/dashboard': { ssr: false },      // SPA
    '/blog/**': { isr: 60 },           // ISR
    '/api/**': { cors: true }
  }
});

Nuxt vs Next.js vs SvelteKit

Popular Nuxt modules

Nuxt best practices

• Use server routes for API. No need for separate Express server.
• useFetch for data. SSR + client + cache built-in.
• routeRules for hybrid rendering. SSG marketing + SSR app.
• Auto-imports for cleaner code. Don't fight the convention.
• Pinia for global state. Replaces Vuex.
• SEO via @nuxt/seo or useSeoMeta.
• Nuxt DevTools. Bundled debugging UI.
• TypeScript everywhere. Auto-generated types per route.

FAQ: Nuxt

Is Nuxt 3 production-ready?

Yes — released 2022, widely used. Nuxt 4 is in beta as of 2026.

Nuxt or Vue alone?

Vue alone for SPAs you control end-to-end. Nuxt for SSR, SSG, SEO-critical apps, or when conventions help.

Can Nuxt deploy to Cloudflare Workers?

Yes — Nitro auto-detects target. nitro: { preset: 'cloudflare' }.

How does Nuxt compare to Next.js?

Different ecosystems (Vue vs React). Nuxt has more conventions out-of-box; Next.js has larger community + more flexibility.

Does Nuxt support TypeScript?

First-class. Auto-generated types for routes, API, layouts.

What's the difference between useFetch and $fetch?

useFetch handles SSR + client + caching automatically. $fetch is imperative, no auto-handling. Use useFetch in setup.

Can I use Nuxt for a static site?

Yes — nitro: { preset: 'static' } generates a fully static site.

Load test your Nuxt app with LoadFocus

LoadFocus runs JMeter and k6 scripts against your Nuxt deployment from 25+ regions to validate performance under traffic. Sign up free at loadfocus.com/signup.