arch-nuxt
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
useStatefor SSR-shared state when appropriate - Keep PWA config in
app/config/pwa.tsand spread it innuxt.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 |
More from hairyf/skills
tailwindcss
Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.
1.7Khairy-utils
Comprehensive skills for working with @hairy/utils core utilities
891motion
Motion animation library for JavaScript, React and Vue. Use when creating animations, gestures, layout transitions, scroll-linked effects, or working with motion values and animation controls.
763next
Next.js framework for building React applications with App Router, Server Components, and optimized performance. Use when working with Next.js apps, routing, data fetching, caching, Server Actions, or building full-stack React applications.
714react-use
Collection of essential React Hooks for sensors, UI, animations, side-effects, lifecycles, and state management
692valtio
Valtio proxy state management for React and vanilla JavaScript. Use when creating reactive state, managing application state, or working with proxy-based state management.
636