Mocking up web app with ^tiVitesse

Features

• ⚡️ Vue 3, Vite 2, NPM, ESBuild - born with fastness

• 🗂 File based routing

• 📦 Components auto importing

• 🍍 State Management via Pinia

• 📑 Layout system

• 🎨 Tailwind CSS

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

• 🗒 Markdown Support

• 🔥 Use the new <script setup> syntax

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

• 🦔 Critical CSS via critters

• 🦾 TypeScript

Pre-packed

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• unplugin-icons - icons as Vue components

Plugins

• Vue Router
  • vite-plugin-pages - 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
• vite-plugin-md - Markdown as components / components in Markdown
  • markdown-it-prism - Prism for syntax highlighting
  • prism-theme-vars - customizable Prism.js theme using CSS variables
• VueUse - collection of useful composition APIs

Coding Style

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

Dev tools

• TypeScript
• critters - Critical CSS
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • ESLint

Variations

As this template is strongly opinionated, the following provides a curated list for community-maintained variations with different preferences and feature sets. Check them out as well. PR to add yours is also welcome!

Community

• vitesse-addons by @johncampionjr - additional options for integrations, including Prettier and Storybook
• vitesse-ssr-template by @frandiox - Vitesse with SSR
• vitespa by @ctholho - Like Vitesse but without SSG/SSR
• vitailse by @zynth17 - Like Vitesse but for admin dashboard and TailwindCSS

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit MrSunshyne/ti-vitesse ti-vitesse-app
cd ti-vitesse-app
npm install

Development

Just run and visit http://localhost:3333

npm run dev

Build

To build the App, run

npm run build

And you will see the generated file in dist that ready to be served.