Vitesse

Features

• ⚡️ Vue 3

  • 🏃 Vite 2, pnpm, ESBuild

• 🗂 File based routing

• 📦 Components auto importing

• 🍍 State Management via Pinia

• 📑 Layout system

• 📲 PWA

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

• 😃 Use icons from any icon sets with classes

• 🌍 I18n ready

• 🔥 Use the new <script setup> syntax

• 📥 APIs auto importing

• 🖨 Static-site generation (SSG) via vite-ssg

• 🦾 TypeScript, of course

• 🦔 Critical CSS via critters

• 👮🏻 Format and Lint with VSCode and CLI

  • 💾 Eslintand Prettier

• 🤖 Standards checking with pre-commit hooks. Test validation on pre-push with Husky

• ⚙️ Unit Testing with Vitest, E2E Testing with Cypress

• ☁️ Deploy on Netlify, zero-config - See Netlify Deployment

*CLI only. VSCode plugin does not support configuration files.

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

• pinia
• vue-router
  • vite-plugin-pages
  • vite-plugin-vue-layouts
• vite-plugin-pwa
• vue-i18n-next
  • vite-plugin-vue-i18n
• vueuse
  • @vueuse/head
• vite-ssg-sitemap
• unplugin-vue-components
• unplugin-auto-import

Nice to haves

• Alias @ to <rootDir>
• Alias ~ to <rootDir>/src a.k.a. <srcDir>
• Predefined and fully typed global variables:
  • VITE_APP_VERSION is read from package.json version at build time
  • VITE_APP_BUILD_EPOCH is populated as new Date().getTime() at build time

Dev tools

• typescript
• cypress - E2E Testing
• pnpm - fast, disk space efficient package manager
• vite-ssg - Static-site generation
  • critters - Critical CSS

Variations

This template is strongly opinionated with my personal preferences and feature sets. It is a fork of the original template created by @antfu and also takes inspiration from Vitesse-Enterprise made by @FranciscoKloganB.

For an up-to-date list of official and community contributions to the vitesse ecosystem, we recommend checking the official repository's variations section.

Try it now

GitHub Template

Create a repo from this template on GitHub.

Usage

Development

Run and visit http://localhost:3000

pnpm dev

Code formatting

pnpm lint

Testing

# Interactive test run
pnpm test:e2e
pnpm test:unit

Build for production

# Ouputs files to dist folder. Ready to be served in SPA mode.
pnpm build:spa
# Outputs files to dist folder which passed through the Vite SSG pipeline. Ready to be served.
pnpm build:ssg

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.