Minimal, fast Nuxt 4 boilerplate aimed at developers. Uses the latest Nuxt releases and stays production-ready whether you keep the project small or scale it.
- Nuxt 4 – Full-stack Vue framework with SSR, file-based routing, and auto-imports
- Nuxt UI – Accessible UI component library with Tailwind-based theming
- Nuxt Image – Image optimization with built-in resizer and multiple providers
- Pinia – Vue state store with SSR support
- Tailwind CSS – Utility-first CSS
- Nuxt 4 – Current major with improved performance and DX
- Pinia – Centralized state with SSR hydration
- Tailwind CSS – Utility-first styling and design tokens
- Nuxt Image – Resizing, modern formats, and provider abstraction
- Dark mode – Theme toggle (light/dark)
- Color themes – Configurable primary palette
- Responsive – Mobile-first layout
- SEO – Meta tags and head configuration
Option 1 – CLI (recommended)
Scaffold a new project without cloning. Requires Bun or npm/yarn with npx/yarn dlx:
bunx v420This runs the v420 CLI to generate a project in the current directory (or a target path). No git clone or manual dependency install needed.
Option 2 – Clone and run locally
- Node.js ≥ 18.x
- Bun (recommended) or npm/yarn
git clone https://github.com/{username}/v420.git
cd v420
bun ibun devDev server runs at http://localhost:3000 with HMR.
bun buildOutput is in .output. Serve with bun run preview or deploy the generated files to your host.
app/
├── components/ # Vue components (auto-imported)
├── layouts/ # Layout wrappers
├── pages/ # File-based routes (Vue Router)
├── stores/ # Pinia stores
└── assets/css/ # Global styles
- Color Picker – Primary color customization (theme token)
- Logo – Site logo used in layout/header
- Layout – Responsive shell with navigation and theme toggle
The template ships with a Pinia store set up for SSR hydration:
- Hydration: Initial state is not serialized; values are read on the client (e.g. from
localStorage) after hydration. - SSR: Safe for server-side rendering with client-only state.
- TypeScript: Uses
@ts-expect-errorwhere required due to Pinia typing limitations.
See Pinia SSR documentation for details.
This repo ships with Cursor agent skills in .cursor/skills/. The AI uses them for Nuxt and UI work in this codebase.
| Skill | Purpose |
|---|---|
| nuxt | Nuxt framework: SSR, auto-imports, file-based routing, server routes, useFetch, middleware, hybrid rendering. Use when editing config, routes, data fetching, or deployment. |
| nuxt-ui | @nuxt/ui v4: 125+ accessible Vue components, Tailwind theming, forms, dashboards. Use when building or customizing UI, themes, or layouts. |
Skills are loaded automatically when the project is opened in Cursor; no extra setup is required.
Issues and pull requests are welcome.
MIT.