Vue ✕ UnoCSS starter template

Fully featured Vue 3 starter template

🌞	🌚

Features

• ⚡️ 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

Plugins

UI Frameworks

• 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

Vite Plugins

• 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

Use the template

GitHub Template

Create a repo from this template on GitHub

Local

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

Type Support for .vue Imports in TS

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.

Related

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