Mocking up web app with ⚡️Vitesse

Live Demo

Features

• ⚡️ Vue3, Vite, pnpm, ESBuild - born with fastness

• 🗂 File based routing

• 📲 Components auto importing

• 🎨 TailwindCSS with dark mode out-of-box

• 😃 Use icons from any icon sets, with no compromise

• 🌍 i18n ready

• 🦾 TypeScript, of course

• ☁️ Deploy on Netlify, zero config

Pre-packed

UI Frameworks

• Tailwind CSS
• tailwindcss-dark-mode

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• PurgeIcons - bundles only the icons that you use

Plugins

• Vue Router
  • vite-plugin-voie - file system based routing
• vite-plugin-components - components auto import
• vue-i18n - internationalization
• VueUse - collection of useful composition APIs

Coding Style

• Use Composition API with <script setup> SFC
• ESLint with @antfu/eslint-config-vue, single colons, no semi.

Dev tools

• TypeScript
• pnpm - fast, disk space efficient package manager
• Netlify - deploy
• VS Code Extensions
  • Iconify IntelliSense
  • i18n Ally
  • Tailwind CSS IntelliSense
  • Vetur
  • ESLint

Try it now!

Github Template

Create a repo from this template on Github.

Clone to local

If you prefer do to it manually with cleaner git history

npx degit antfu/vitesse my-vitesse-app
cd my-vitesse-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Why

I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the idea simply comes true in a very short time.

So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintains your own forks.