explaingit

antfu-collective/vitesse

9,427TypeScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

A pre-configured Vue 3 and Vite starter template with file-based routing, auto-imported components, Pinia state management, UnoCSS styling, and built-in testing tools ready to use from clone.

Mindmap

mindmap
  root((vitesse))
    What it is
      Vue 3 starter template
      Pre-configured project
    Built-in features
      File-based routing
      Auto-imported components
      Pinia state
      UnoCSS styles
    Output options
      Static site
      Progressive Web App
      Netlify deploy
    Testing
      Vitest unit tests
      Cypress end-to-end
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Start a Vue 3 web app with routing, state management, and styling already configured, no boilerplate setup needed

USE CASE 2

Build a Progressive Web App that users can install on their phone or desktop with no extra configuration

USE CASE 3

Generate a static site with pre-built HTML pages for fast loading and simple free hosting on Netlify

USE CASE 4

Write unit tests with Vitest and end-to-end tests with Cypress on a project that already has them wired up

Tech stack

TypeScriptVue 3VitePiniaUnoCSSVitestCypress

Getting it running

Difficulty · moderate Time to first run · 30min

In plain English

Vitesse is a starter template for building web applications with Vue 3 and Vite. A starter template is a pre-configured project you can copy as a starting point instead of setting up everything from scratch. Vite is a build tool that makes web development faster, and Vue 3 is a JavaScript framework for building interactive user interfaces. The template comes with a lot of decisions already made. Pages are organized using file-based routing, meaning the folder and file structure of your source code automatically determines the URL structure of your app, similar to how frameworks like Next.js work. Vue components are imported automatically without needing to manually declare them at the top of each file. State management uses Pinia, a library for storing and sharing data across different parts of the application. For styling, the template uses UnoCSS, which generates only the CSS classes your project actually uses, keeping the final file size small. Icons can be pulled from a large library of icon sets using simple class names. The template also includes internationalization support, meaning it is set up to handle multiple languages if needed. The template can generate a static site, where all pages are pre-built at compile time into plain HTML files, which makes hosting simpler and pages load faster. It can also be configured as a Progressive Web App, which allows users to install it on their phone or desktop like a native application. Testing tools are included: Vitest for unit tests and Cypress for end-to-end tests. Deployment to Netlify requires no additional configuration. The README notes that this template was created during an early period of Vue 3's development and recommends Nuxt for new projects, while noting Vitesse still works as a reference or starting point.

Copy-paste prompts

Prompt 1
I just cloned the Vitesse template, help me add a new page with its own route, a Pinia store for the data, and UnoCSS utility classes for the layout
Prompt 2
Show me how to add English and Spanish language support to a Vitesse Vue 3 app using its built-in internationalization setup
Prompt 3
How do I configure Vitesse to deploy to Netlify as a fully pre-rendered static site?
Prompt 4
Add an icon from the UnoCSS icon library to a Vitesse Vue 3 component without writing any import statements
Prompt 5
Write a Vitest unit test for a Vitesse component that reads from a Pinia store and renders a list of items
Open on GitHub → Explain another repo

← antfu-collective on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.