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:

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)
Reload the VSCode window by running Developer: Reload Window from the command palette.

👽 vue-starter
🧚🏻 nuxt-starter

matijaoe/vue-anu-starter