Arch Nuxt Lite
Vitesse Lite — lightweight Vite + Vue 3 SPA with file-based routing, UnoCSS, VueUse, Vitest.
by hairyf · MIT
The skill
Vitesse Lite — lightweight Vite + Vue 3 SPA with file-based routing, UnoCSS, VueUse, Vitest. Use when scaffolding or maintaining a simple Vue SPA with this stack.
arch-nuxt-lite (Vitesse Lite) is the lightweight Vite + Vue 3 SPA starter: file-based routing via unplugin-vue-router, components and composables auto-import, UnoCSS, VueUse, and Vitest. No SSR, i18n, layouts, SSG, PWA, or Markdown. Prefer it for simple client-only apps; use arch-nuxt or Nuxt for SSR.
The skill is based on vitesse-lite (arch-nuxt-lite source), generated at 2026-01-30.
Recommended practices:
- Prefer Vite + unplugin-vue-router for file-based routing; keep routes in
src/pages - Use
~/alias forsrc/in imports - Use VueUse (useDark, useToggle, useCounter, etc.) and composables in
src/composables; all auto-imported
Core References
| Topic | Description | Reference |
|---|---|---|
| Overview | Project purpose, structure, stack, when to use | core-overview |
| App structure | Entry, RouterView, path alias, App.vue | core-app-structure |
| Vite config | defineConfig, plugins, alias, Vitest | core-vite-config |
| Scripts | build, dev, lint, typecheck, preview, test | core-scripts |
| CI | GitHub Actions — build, test, lint, typecheck matrix | core-ci |
| ESLint | @antfu/eslint-config, unocss, formatters, pnpm | core-eslint |
Features
| Topic | Description | Reference |
|---|---|---|
| Routing | unplugin-vue-router, file-based routes, useRoute/useRouter, typed params | features-routing |
| Components | unplugin-vue-components, auto-import, UnoCSS icons | features-components |
| Composables | unplugin-auto-import, composables dir, dark mode (useDark, useToggle) | features-composables |
| UnoCSS | uno.config.ts, shortcuts, presets, icons, web fonts | features-unocss |
| Testing | Vitest, jsdom, component tests with @vue/test-utils | features-testing |
| Deploy | Netlify, netlify.toml, SPA redirect | features-deploy |
Best Practices
| Topic | Description | Reference |
|---|---|---|
| Routing | File-based routing patterns, dynamic/catch-all routes | best-practices-routing |
Use this skill
Connect your agent to the Skill Store MCP server and ask for it by ref: hairyf/arch-nuxt-lite-97446956361.
Details
- Publisher
- hairyf
- Category
- Software Development › Frontend & UI
- License
- MIT
- Updated
- 2026-10-14
References
More from hairyf
- Anime Anime.js v4 - A fast, multipurpose and lightweight JavaScript animation library.
- Antfu Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects.
- Arch Nuxt Module Builder Build and ship Nuxt modules with @nuxt/module-builder.
- Arch Nuxt Vitesse-style Nuxt 4 starter with Vite, UnoCSS, Pinia, VueUse, PWA.