arch-nuxt is the Vitesse-style starter for Nuxt 4: SSR, file-based routing, auto-imports, and an opinionated stack (Vite, UnoCSS, Pinia, VueUse, ColorMode, VitePWA). It provides a minimal, production-ready setup: app/ structure, layouts, composables, Pinia store with HMR, server API, PWA config, and UnoCSS. Prefer Vite-powered Nuxt; do not consider webpack or other bundlers.
The skill is based on vitesse-nuxt (arch-nuxt source), generated at 2026-01-30.
Recommended practices:
- Prefer Vite-powered Nuxt; skip webpack and other bundlers
- Use Pinia for global/client state; use
useState for SSR-shared state when appropriate - Keep PWA config in
app/config/pwa.ts and spread it in nuxt.config.ts
Core References
| Topic | Description | Reference |
|---|
| Overview | Project purpose, structure, stack, when to use | core-overview |
| Nuxt config | defineNuxtConfig, modules, app head, nitro, experimental | core-nuxt-config |
| App structure | app/, app.vue, NuxtLayout, NuxtPage | core-app-structure |
| Scripts | build, dev, generate, preview, typecheck, dev:pwa | core-scripts |
| Constants | app/constants, appName, appDescription | core-constants |
| ESLint | @antfu/eslint-config, Nuxt append | core-eslint |
Features
| Topic | Description | Reference |
|---|
| Layouts | Layout system, definePageMeta layout | features-layouts |
| Composables | useCount, useState, auto-import | features-composables |
| Pinia state | useUserStore, defineStore, HMR | features-pinia-state |
| Server API | defineEventHandler, server/api | features-server-api |
| PWA | VitePWA config, manifest, workbox, dev PWA | features-pwa |
| UnoCSS | uno.config.ts, shortcuts, presets, icons | features-unocss |
| ColorMode | useColorMode, DarkToggle, theme-color meta | features-color-mode |
| Components | Auto-import, Counter, Footer, NuxtLink | features-components |
| Client-only | ClientOnly, Suspense, useOnline, fallback | features-client-only |
| Data fetching | useFetch, useTimeAgo, async component data | features-data-fetching |
Best Practices
