Fully featured Vue 3 starter template

🌞	🌚

• ⚡️ Vue 3, Vite, pnpm
• 🗂 File based routing, fully typed
• 📦 Auto imported components
• 🫧 Auto imported APIs
• 🎨 UnoCSS - The instant on-demand atomic CSS engine
• 👽 Pure CSS icons powered by Iconify - Over 100,000 icons across 100+ icon packs
• 🍍 Pinia - The Vue Store that you will enjoy using
• 🛠️ VueUse - Collection of essential Vue Composition Utilities
• 💪🏻 TypeScript
• 🧹 ESLint / matijaoe config
• ☁️ Deploy with zero config

• UnoCSS - The instant on-demand atomic CSS engine
  • presetUno - Tailwind / Windi CSS compact preset
  • presetAttributify - Provides Attributify Mode to other presets and rules
  • presetTypography - The typography preset
  • presetIcons - Use any icons with Pure CSS for UnoCSS
  • presetWebFonts - Web fonts at ease
  • transformerDirectives - Transformer for @apply, @screen and theme() directives
  • transformerVariantGroup - Enables the variant group feature of Windi CSS for UnoCSS
• Post CSS
  • postcss-nesting

• unplugin-vue-router - Automatic file based routing in with TypeScript support
• unplugin-auto-import - Directly use Vue Composition API and other APIs without importing
• unplugin-vue-components - Components auto import

Create a repo from this template on GitHub

Clone the template locally, with no git history (powered by unjs/giget)

npx giget gh:matijaoe/vue-starter <name>

# Install dependencies (if no pnpm installed, run: npm install -g pnpm) pnpm i # Start dev server pnpm dev # Build for production pnpm build # Deploy anywhere pnpm deploy:vercel # vercel pnpm deploy:ntl # netlify pnpm deploy:surge # surge.sh

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

• 🧚🏻 nuxt-starter
• 🔮 vue-anu-starter