Vitesse

Vitesse is an opinionated Vue 3 + Vite starter template by Anthony Fu that scaffolds a production-ready web app with file-based routing, auto-imported components, PWA support, static site generation, and internationalization out of the box.

What is Vitesse?

Vitesse is a starter template (boilerplate) for building web applications with Vue 3, Vite 2, and pnpm. It accepts your Vue components, pages, and Markdown files as input and produces a static site or an installable PWA as output. The template runs on the Vite dev server and uses vite-ssg to generate static HTML at build time. It is maintained by Anthony Fu and available on GitHub as antfu/vitesse.

This is not a UI component library; it is a pre-configured project scaffold that wires together dozens of plugins. You get Vue Router, file-based routing from src/pages, automatic component imports from src/components, a layout system in src/layouts, Windi CSS for utility styling, and Iconify for icons. The template also includes TypeScript, ESLint with @antfu/eslint-config (single quotes, no semicolons), and VueUse composition APIs.

What makes Vitesse stand out?

• File-based routing — Routes are generated automatically from files in src/pages using vite-plugin-pages and Vue Router.
• Auto component imports — Components in src/components are imported on demand by vite-plugin-components, eliminating manual imports.
• Layout system — Define reusable page layouts in src/layouts with vite-plugin-vue-layouts.
• PWA support — vite-plugin-pwa adds a service worker and web app manifest for offline and installable experiences.
• Windi CSS — Use Windi CSS, an on-demand utility-first CSS framework, with the official Typography plugin; it is faster than a full Tailwind build.
• Iconify integration — vite-plugin-icons lets you use icons from any icon set as Vue components; browse them on Icônes.
• i18n ready — Vue I18n and vite-plugin-vue-i18n are pre-packaged, so adding multi-language support starts with locale files.
• Markdown as components — vite-plugin-md turns .md files into Vue components, with Prism syntax highlighting and a CSS-variable-driven theme.
• SSG and critical CSS — vite-ssg generates static HTML and critters inlines critical CSS for fast first paint.

Who is Vitesse for?

• Vue 3 developers who want a batteries-included setup with best practices enforced by ESLint and TypeScript.
• Indie hackers and solo makers who want to spin up an MVP fast without configuring routing, PWA, i18n, and CSS frameworks manually.
• PWA-focused teams who need an installable app with offline support from day one, without writing service workers by hand.
• Open-source project maintainers who want a clean, well-documented starter that they can fork or extend.

What can you do with Vitesse?

• Launch a marketing site or landing page — The template's SSG output deploys instantly to static hosting.
• Build a progressive web app — It includes all PWA plumbing, so your app can be installed on mobile and desktop devices.
• Create a multi-language blog — Combine i18n with Markdown rendering for content in multiple languages.
• Prototype an internal tool or dashboard — The auto-import and layout system make adding pages quick.

How does Vitesse work?

Install dependencies with pnpm i and run pnpm dev to start the Vite dev server at http://localhost:3333. pnpm build creates a static dist folder that you can deploy anywhere; Netlify deployment is zero-config. The template also supports GitHub's "use this template" flow for creating a new repo.

Variations

Vitesse has official and community variations. Official ones include vitesse-lite (a lighter version), vitesse-webext (for browser extensions), and vitesse-nuxt (experimental, out-of-date). Community forks add SSR (vitesse-ssr-template), Prettier and Storybook via vitesse-addons, and a no-SSG variant called vitespa.

FAQ

Is Vitesse free?

Yes, Vitesse is an open-source starter template on GitHub. You can clone it, use it in your projects, and fork it.

How do I update the template's metadata?

The README checklist tells you to rename the name field in package.json, update the author in LICENSE, change the title in App.vue, replace the favicon in public, remove the .github folder, and clean up the READMEs and routes.

Does Vitesse work with Nuxt?

No, Vitesse is built for Vue 3 + Vite. There is a separate, experimental vitesse-nuxt project, but it is currently out-of-date.

Can I use Tailwind CSS instead of Windi CSS?

Windi CSS is compatible with Tailwind's utility classes and provides on-demand compilation. You can swap it out, but the template ships with Windi CSS pre-configured.