$devvkit learn --librarie nuxt-guide

Nuxt Guide

[vue][ssr][ssg][full-stack]

JavaScript / TypeScript

Install

npx nuxi@latest init my-app
# or: pnpm dlx nuxi@latest init my-app

Nuxt is the Vue equivalent of Next.js. It provides SSR, static generation, file-based routing, server routes, and auto-imports out of the box.

Nuxt 3 uses Nitro (an extremely portable server engine) and Vite. Server components, islands architecture, and hybrid rendering are first-class features.

Auto-imports for composables, components, and Vue APIs eliminate boilerplate. The layers system lets you compose multiple Nuxt projects together.

Setup

Create project— Scaffold a new Nuxt app.

npx nuxi@latest init my-app
cd my-app
npm run dev

Routing

Page route— File-based page.

// pages/index.vue
<script setup lang="ts">
const { data: users } = await useFetch('/api/users')
</script>
<template>
  <div v-for="u in users" :key="u.id">{{ u.name }}</div>
</template>

Dynamic route— Route with params.

// pages/users/[id].vue
<script setup lang="ts">
const route = useRoute()
const { data: user } = await useFetch(/api/users/)
</script>

Middleware— Route protection.

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const token = useCookie('token')
  if (!token.value) return navigateTo('/login')
})

Data Fetching

Universal fetch— Works on server and client.

const { data, pending, error, refresh } = await useFetch('/api/users', {
  lazy: true,
  server: true,
})

Server Routes

Server API route— Backend endpoint.

// server/api/users.get.ts
export default defineEventHandler(async (event) => {
  const users = await db.findMany()
  return users
})

Deployment

Build for static— Generate static output.

npm run generate
# Output in .output/public/
# Deploy to Netlify, Vercel, Cloudflare Pages

Build for SSR— Node.js server deployment.

npm run build
node .output/server/index.mjs