vitesse

Vitesse is a highly opinionated starter template for building web applications with Vite and Vue 3, created by Anthony Fu. It aims to provide a fast, pre-configured setup so developers can quickly turn ideas into working apps without spending time on configuration. The template is designed for speed, leveraging modern tooling like pnpm, esbuild, and Vite, and includes a curated set of features and plugins out of the box. **Key Features** - **Vue 3 + Vite**: Built on the latest Vue 3 with Vite for fast development and build times. - **File-based Routing**: Uses `unplugin-vue-router` for automatic route generation from the `src/pages` directory. - **Auto-imports**: Components, APIs (e.g., Composition API), and icons are auto-imported, reducing boilerplate. - **State Management**: Pinia for intuitive, type-safe state management. - **Layout System**: Supports multiple layouts via `vite-plugin-vue-layouts`. - **PWA Support**: Integrated with `vite-plugin-pwa` for progressive web app capabilities. - **Styling**: UnoCSS for instant on-demand atomic CSS, with support for any icon set via Iconify. - **Internationalization**: Vue I18n with `unplugin-vue-i18n` for multi-language support. - **Markdown**: Write Markdown as Vue components using `unplugin-vue-markdown` with Shiki syntax highlighting. - **SSG**: Static-site generation via `vite-ssg`, with critical CSS optimization using `beasties`. - **Testing**: Vitest for unit tests and Cypress for E2E tests, integrated with GitHub Actions. - **TypeScript**: Full TypeScript support. - **Deployment**: Zero-config deployment to Netlify, plus Docker support for production builds. **Pre-packed Plugins** - Vue Router, Pinia, VueUse, Unhead for head management, and `vite-plugin-vue-devtools` for enhanced developer experience. - Coding style enforced with ESLint using `@antfu/eslint-config` (single quotes, no semicolons). - VS Code extensions recommended for Vite, Volar, Iconify IntelliSense, i18n Ally, and ESLint. **Variations** The template has inspired several community-maintained variations, including: - `vitesse-lite`: Lightweight version. - `vitesse-nuxt3`: For Nuxt 3. - `vitesse-webext`: For browser extensions. - `vitesse-ssr-template`: With SSR support. - `vitailse`: With TailwindCSS. - `vitesse-h5`: For mobile apps. - `vitesse-solid`: For SolidJS. **Usage** - **Development**: Run `pnpm dev` and visit `http://localhost:3333`. - **Build**: Run `pnpm build` to generate a `dist` folder. - **Deploy**: Deploy to Netlify by connecting the repo, or use Docker with `docker buildx build . -t vitesse:latest` and run with `docker run --rm -it -p 8080:80 vitesse:latest`. **Note**: The author recommends using Nuxt for new projects due to better Vue developer experience and more consistent maintenance, as Vitesse is from the early Vite/Vue 3 transition period and updates may be slower. However, it remains a solid reference for learning and for projects that align with its opinionated setup. **Checklist for Customization** When using the template, update the author name in `LICENSE`, title in `App.vue`, hostname in `vite.config.ts`, favicon in `public`, remove the `.github` folder, and clean up READMEs and routes. Overall, Vitesse is a powerful, feature-rich starter for developers who want a comprehensive, opinionated setup for Vue 3 apps, with a focus on speed and developer experience.