# Nuxt — The Full-Stack Vue Framework

> Nuxt is the intuitive full-stack framework built on Vue.js. It provides server-side rendering, auto-imports, file-based routing, data fetching, and a powerful module ecosystem — making Vue applications production-ready with minimal configuration.

## Install

Save as a script file and run:

# Nuxt — The Full-Stack Vue Framework

## Quick Use
```bash
# Create a new Nuxt project
npx nuxi@latest init my-app
cd my-app && npm install && npm run dev

# Access at http://localhost:3000
```

```vue
<!-- pages/index.vue -->
<script setup lang="ts">
const { data: posts } = await useFetch("/api/posts");
</script>

<template>
  <div>
    <h1>My Blog</h1>
    <article v-for="post in posts" :key="post.id">
      <NuxtLink :to="`/posts/${post.id}`">{{ post.title }}</NuxtLink>
    </article>
  </div>
</template>
```

## 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
```typescript
// 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"
    }
  }
});
```

```typescript
// 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
| Feature | Nuxt | Next.js | SvelteKit | Astro | Remix |
|---|---|---|---|---|---|
| Base Framework | Vue | React | Svelte | Any | React |
| Auto-Imports | Yes | No | No | No | No |
| Server Engine | Nitro | Custom | Custom | Custom | Custom |
| Hybrid Rendering | routeRules | Per-page | Per-page | Islands | SSR |
| Module System | Rich (200+) | npm packages | npm packages | Integrations | npm packages |
| Edge Deploy | Yes | Yes | Yes | Yes | Yes |
| Learning Curve | Low | Moderate | Low | Low | Moderate |

## 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

---
Source: https://tokrepo.com/en/workflows/691717f0-3702-11f1-9bc6-00163e2b0d79
Author: Script Depot