Nuxt3+Vite Template

Features

• 💚 Nuxt 3 - SSR, ESR, File-based routing, components auto importing, modules, etc.
• ⚡️ Vite - Instant HMR.
• 🎨 UnoCSS - The instant on-demand atomic CSS engine.
• 😃 Use icons from any icon sets in Pure CSS, powered by UnoCSS.
• 🔥 The <script setup> syntax.
• 🍍 State Management via Pinia
• 📑 Layout system.
• Ⓜ️ Mock API with whitelist
• 📥 APIs auto importing - for Composition API, VueUse and custom composables.
• 🦾 TypeScript.
• 📲 PWA with offline support and auto update behavior.
• 🌓 Dark/Light mode.
• 📝 Nuxt Content, Markdown Page Support, Content made easy

Plugins

Nuxt Modules

• VueUse - collection of useful composition APIs.
• ColorMode - dark and Light mode with auto detection made easy with Nuxt.
• UnoCSS - the instant on-demand atomic CSS engine.
• Pinia - intuitive, type safe, light and flexible Store for Vue. With @pinia-plugin-persistedstate/nuxt for persist data use localStorage.
• VitePWA - zero-config PWA Plugin for Nuxt 3.
• DevTools - unleash Nuxt Developer Experience.
• Content - Nuxt Content reads the content/ directory in your project, parses .md, .yml, .csv and .json files to create a powerful data layer for your application. Use Vue components in Markdown with the MDC syntax.

IDE

We recommend using VS Code with Volar to get the best experience (You might want to disable Vetur if you have it).

Try it now!

Online

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit toimc/nuxt-starter my-nuxt3-app
cd my-nuxt3-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

#start
pnpm dev

#build
pnpm build