Nuxt — The Full-Stack Vue Framework

Introduction

Nuxt is to Vue what Next.js is to React — a full-stack framework that makes Vue production-ready. It provides server-side rendering, static site generation, file-based routing, auto-imports, and a rich module ecosystem that eliminates boilerplate and configuration.

With over 60,000 GitHub stars, Nuxt powers production applications at GitLab, Upwork, NASA, and thousands of companies. Nuxt 3 (built on Vue 3 and Nitro) brought a complete rewrite with TypeScript support, hybrid rendering, and edge deployment capabilities.

What Nuxt Does

Nuxt handles the infrastructure of Vue applications: routing is automatic from the pages/ directory, components and composables are auto-imported, server API routes live in server/api/, and rendering can be configured per-route (SSR, SSG, SPA, or hybrid). The Nitro server engine enables deployment to any platform.

Architecture Overview

[Nuxt Application]
        |
   [File-Based Conventions]
   pages/    -> Routes
   components/ -> Auto-imported
   composables/ -> Auto-imported
   server/api/ -> API endpoints
   layouts/  -> Page layouts
   middleware/ -> Route guards
        |
   [Nuxt Core]
   Vue 3 + Vite + Nitro
        |
+-------+-------+
|       |       |
[Client]  [Server (Nitro)]
Vue 3     Universal server
Hydration  that deploys to:
           Node.js, Edge,
           Cloudflare, Vercel,
           Netlify, Deno

Self-Hosting & Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    "@nuxtjs/tailwindcss",
    "@pinia/nuxt",
    "@nuxt/image"
  ],
  routeRules: {
    "/": { prerender: true },         // Static at build time
    "/dashboard/**": { ssr: false },   // Client-side only
    "/api/**": { cors: true },         // API with CORS
    "/blog/**": { isr: 3600 }          // Revalidate every hour
  },
  runtimeConfig: {
    apiSecret: process.env.API_SECRET,
    public: {
      apiBase: process.env.API_BASE || "/api"
    }
  }
});

// server/api/posts.get.ts
export default defineEventHandler(async (event) => {
  const posts = await $fetch("https://jsonplaceholder.typicode.com/posts");
  return posts.slice(0, 10);
});

Key Features

• Auto-Imports — components, composables, and utilities imported automatically
• File-Based Routing — pages/ directory maps to URL routes
• Hybrid Rendering — SSR, SSG, SPA, or ISR per-route via routeRules
• Nitro Server — universal server engine deployable everywhere
• Server API — backend endpoints in server/api/ with auto-typing
• Module Ecosystem — 200+ modules for auth, CMS, analytics, and more
• TypeScript — first-class TS support with auto-generated types
• DevTools — built-in browser DevTools for debugging

Comparison with Similar Tools

FAQ

Q: Nuxt 2 vs Nuxt 3 — should I upgrade? A: Yes. Nuxt 3 is significantly better — Vue 3, TypeScript, Vite, Nitro, and auto-imports. Migration guides are available. All new projects should use Nuxt 3.

Q: Can I use Nuxt for static sites? A: Yes. Use "nuxt generate" for full static generation, or configure routeRules for hybrid rendering where some pages are static and others are server-rendered.

Q: How does Nuxt compare to plain Vue + Vue Router? A: Nuxt adds SSR, file-based routing, auto-imports, API routes, and a module ecosystem. Use plain Vue for simple SPAs; Nuxt when you need SEO, server rendering, or full-stack features.

Q: Where can I deploy Nuxt? A: Anywhere. Nitro presets support Vercel, Netlify, Cloudflare Workers, AWS Lambda, Azure, Deno Deploy, Node.js, and Docker. Use "NITRO_PRESET=cloudflare nuxt build" for platform-specific builds.

Sources

• GitHub: https://github.com/nuxt/nuxt
• Documentation: https://nuxt.com/docs
• Modules: https://nuxt.com/modules
• Created by Sebastien Chopin
• License: MIT