Vue Vitesse
π Opinionated Vite + Vue Starter Template
vitesse-railway
marco-quintella/vitesse-railway
Just deployed
Features
-
π File based routing
-
π Layout system
-
π² PWA
-
π¨ UnoCSS - the instant on-demand atomic CSS engine
-
π I18n ready
-
π Component Preview
-
π Markdown Support
-
π₯ Use the new
script setup
syntax -
π₯ APIs auto importing - use Composition API and others directly
-
π¨ Static-site generation (SSG) via vite-ssg
-
π¦ Critical CSS via critters
-
π€ 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 routingvite-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 importunplugin-auto-import
- Directly use Vue Composition API and others without importingunplugin-vue-macros
- Explore and extend more macros and syntax sugar to Vue.vite-plugin-pwa
- PWAunplugin-vue-markdown
- Markdown as components / components in Markdown@shikijs/markdown-it
- Shiki for syntax highlighting
- Vue I18n - Internationalization
unplugin-vue-i18n
- unplugin for Vue I18n
- VueUse - collection of useful composition APIs
vite-ssg-sitemap
- Sitemap generator@vueuse/head
- manipulate document head reactivelyvite-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 with @antfu/eslint-config, single quotes, no semi.
Dev tools
- TypeScript
- Vitest - Unit testing powered by Vite
- Cypress - E2E testing
- pnpm - fast, disk space efficient package manager
vite-ssg
- Static-site generation- critters - Critical CSS
- Netlify - zero-config deployment
- VS Code Extensions
- Vite - Fire up Vite server automatically
- Volar - Vue 3
script setup
IDE support - Iconify IntelliSense - Icon inline display and autocomplete
- i18n Ally - All in one i18n support
- 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!
Official
- vitesse-lite - Lightweight version of Vitesse
- vitesse-nuxt3 - Vitesse for Nuxt 3
- vitesse-nuxt-bridge - Vitesse for Nuxt 2 with Bridge
- vitesse-webext - WebExtension Vite starter template
Community
- vitesse-ssr-template by @frandiox - Vitesse with SSR
- vitailse by @zynth17 - Like Vitesse but with TailwindCSS
- vitesse-modernized-chrome-ext by @xiaoluoboding - β‘οΈ Modernized Chrome Extension Manifest V3 Vite Starter Template
- vitesse-stackter-clean-architect by @shamscorner - A modular clean architecture pattern in vitesse template
- vitesse-enterprise by @FranciscoKloganB - Consistent coding styles regardless of team-size.
- vitecamp by @nekobc1998923 - Like Vitesse but without SSG/SSR/File based routing, includes Element Plus
- vitesse-h5 by @YunYouJun - Vitesse for Mobile
- bat by @olgam4 - Vitesse for SolidJS
- vitesse-solid by @xbmlz - Vitesse for SolidJS, build with
SolidStart
, includes UnoCSS and HopeUI.
Template Content
vitesse-railway
marco-quintella/vitesse-railway