hungify/vue-typescript-stater

Vue TypeScript template starter with more config

Vue 3 + TypeScript + Vite

Features

• ⚡️ Vue 3, Vite, pnpm, esbuild - born with fastness

• 🗂 File based routing

• 📦 Components auto importing

• 🍍 State Management via Pinia

• 📑 Layout system

• 🎨 UnoCSS - the instant on-demand atomic CSS engine

• 😃 Use icons from any icon sets with classes

• 🔥 Use the new <script setup> syntax

• 📥 APIs auto importing - use Composition API and others directly

• 🔤 Webfont self-hosting

• 🦾 TypeScript, of course

• ⚙️ Unit Testing with Vitest, E2E Testing with Cypress on GitHub Actions

• ☁️ Deploy on Netlify, zero-config

Pre-packed

UI Frameworks

• UnoCSS - The instant on-demand atomic CSS engine.

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• Pure CSS Icons via UnoCSS

Plugins

• Vue Router
  • unplugin-vue-router - file system based routing
  • vite-plugin-vue-layouts - layouts for pages
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• unplugin-vue-components - components auto import
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• VueUse - collection of useful composition APIs
• vite-plugin-webfont-dl - Zero-config webfont (Google Fonts) downloader and injector to improve website's performance.
• vite-plugin-vue-devtools - Designed to enhance the Vue developer experience.

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint

Dev tools

• TypeScript
• Vitest - Unit testing powered by Vite
• Cypress - E2E testing
• pnpm - fast, disk space efficient package manager
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • ESLint

Development

pnpm dev

Build

To build the App, run

pnpm build