arch-nuxt

Vitesse-style Nuxt 4 starter with Vite, UnoCSS, Pinia, VueUse, PWA. Use when scaffolding or maintaining a Nuxt app with this stack.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "arch-nuxt" with this command: npx skills add hairyf/skills/hairyf-skills-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 useState for SSR-shared state when appropriate
  • Keep PWA config in app/config/pwa.ts and spread it in nuxt.config.ts

Core References

TopicDescriptionReference
OverviewProject purpose, structure, stack, when to usecore-overview
Nuxt configdefineNuxtConfig, modules, app head, nitro, experimentalcore-nuxt-config
App structureapp/, app.vue, NuxtLayout, NuxtPagecore-app-structure
Scriptsbuild, dev, generate, preview, typecheck, dev:pwacore-scripts
Constantsapp/constants, appName, appDescriptioncore-constants
ESLint@antfu/eslint-config, Nuxt appendcore-eslint

Features

TopicDescriptionReference
LayoutsLayout system, definePageMeta layoutfeatures-layouts
ComposablesuseCount, useState, auto-importfeatures-composables
Pinia stateuseUserStore, defineStore, HMRfeatures-pinia-state
Server APIdefineEventHandler, server/apifeatures-server-api
PWAVitePWA config, manifest, workbox, dev PWAfeatures-pwa
UnoCSSuno.config.ts, shortcuts, presets, iconsfeatures-unocss
ColorModeuseColorMode, DarkToggle, theme-color metafeatures-color-mode
ComponentsAuto-import, Counter, Footer, NuxtLinkfeatures-components
Client-onlyClientOnly, Suspense, useOnline, fallbackfeatures-client-only
Data fetchinguseFetch, useTimeAgo, async component datafeatures-data-fetching

Best Practices

TopicDescriptionReference
RoutingFile-based routing, dynamic/catch-all routesbest-practices-routing
Page metadefinePageMeta, layout selectionbest-practices-page-meta

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

tailwindcss

No summary provided by upstream source.

Repository SourceNeeds Review
749-hairyf
General

hairy-utils

No summary provided by upstream source.

Repository SourceNeeds Review
689-hairyf
General

react-use

No summary provided by upstream source.

Repository SourceNeeds Review
503-hairyf
General

motion

No summary provided by upstream source.

Repository SourceNeeds Review
486-hairyf