Vue ✕ Anu starter template

Features

• ⚡️ Vue 3, Vite, pnpm
• 🗂 File based routing, fully typed
• 📦 Auto imported components
• 🫧 Auto imported APIs
• 🫶 Anu - DX focused utility base vue component library built on top of UnoCSS
• 🎨 UnoCSS - The instant on-demand atomic CSS engine.
• 😃 Use icons from any icon sets in Pure CSS
• 🍍 Pinia - The Vue Store that you will enjoy using
• 🛠️ VueUse - Collection of essential Vue Composition Utilities
• 💪🏻 TypeScript
• 🧹 ESLint / antfu
• ☁️ Deploy with zero config

Pre-packed

UI Frameworks

• Anu - Component library built on top of UnoCSS
• 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-nested

Vite plugins

• unplugin-vue-router - Automatic file based routing in with TypeScript support
• unplugin-auto-import - Directly use Vue Composition API and others 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-anu-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

• 👽 vue-starter
• 🧚🏻 nuxt-starter