DOCSEARCHbyAlgolia
Submit Docs

vitesse

repository·main·Indexed 27 days ago

https://github.com/antfu-collective/vitesse

An opinionated, high-performance Vite starter template for Vue 3 applications. It features a pre-configured tech stack including TypeScript, Pinia, UnoCSS, file-based routing via unplugin-vue-router, and SSG via vite-ssg. Key capabilities include auto-importing for components and APIs, PWA support, Markdown integration, and i18n via vue-i18n. It also includes testing setups with Vitest and Cypress, and zero-config deployment for Netlify.

Tokens
4.3K
Snippets
13
Records
31
Agent score
93%

What's inside vitesse

  1. Vitesse Project Overview and Features

    main

    Vitesse is an opinionated Vite starter template for building web applications quickly using Vue 3.

    Note: For better Vue development experience and ongoing maintenance, it is recommended to use Nuxt 3 instead. This template is maintained slowly as a reference.

    Core Tech Stack

    • Frameworks: Vue 3, Vite, Pinia (State Management)
    • Styling: UnoCSS (Atomic CSS)
    • Routing: File-based routing via unplugin-vue-router and a layout system via vite-plugin-vue-layouts
    • Icons: Iconify and UnoCSS icon presets
    • Rendering: SSG (Static Site Generation) via vite-ssg with beasties for critical CSS generation
    • Features:
      • Component auto-loading (unplugin-vue-components)
      • API auto-import (unplugin-auto-import)
      • PWA support (vite-plugin-pwa)
      • Markdown support (unplugin-vue-markdown)
      • Internationalization (i18n) out of the box
      • TypeScript support
      • Unit testing with Vitest and E2E testing with Cypress
      • Zero-config deployment to Netlify

  2. Vitesse Core Features and Tech Stack

    main

    Vitesse is an opinionated Vite starter template with the following integrated features:

    Core Engine

    • Vue 3 & Vite
    • TypeScript
    • pnpm & esbuild

    Routing & Layout

    • File-based routing via unplugin-vue-router (located in src/pages).
    • Layout system via vite-plugin-vue-layouts (located in src/layouts).

    State & Logic

    • Pinia for state management.
    • VueUse collection of Composition APIs.
    • APIs auto-importing via unplugin-auto-import (use Composition API directly without imports).
    • Components auto-importing via unplugin-vue-components (located in src/components).

    Styling & UI

    • UnoCSS: Atomic CSS engine.
    • Iconify: Use any icon set via classes.
    • PWA support via vite-plugin-pwa.

    Content & Internationalization

    • Markdown Support: Use Markdown as components via unplugin-vue-markdown (includes Shiki syntax highlighting).
    • I18n: Internationalization ready via Vue I18n and unplugin-vue-i18n (locales in locales/).

    Deployment & Testing

    • SSG: Static-site generation via vite-ssg with beasties for Critical CSS.
    • Testing: Unit testing with Vitest and E2E testing with Cypress.

  3. Quickstart: Clone and Setup Vitesse

    main

    To start a new project using the Vitesse template, you can either use the GitHub template feature or clone it manually using degit to ensure a clean git history.

    Prerequisites:

    • Node.js >= 14.18
    • pnpm (recommended)

    Manual Setup:

    1. Clone the template using degit.
    2. Navigate to the project directory.
    3. Install dependencies using pnpm.
    npx degit antfu-collective/vitesse my-vitesse-app
cd my-vitesse-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

  5. Specify layouts for Vue pages

    main

    This project uses vite-plugin-vue-layouts and unplugin-vue-router to manage page layouts. By default, the system uses src/layouts/default.vue. To use a different layout, specify the layout name in the page's Single File Component (SFC) using a <route> block with YAML syntax in the meta.layout field.

    <route lang="yaml">
meta:
  layout: home
</route>

  6. Manage locale translation files

    main

    The locales/ directory is used to store translation files. Any YAML files placed in this folder are automatically loaded and registered. The filename of each YAML file serves as the locale code (e.g., en-US.yaml would register the en-US locale).

    This implementation relies on vue-i18n. For an improved development experience in VS Code, it is recommended to use the i18n Ally extension.

  9. Post-Installation Checklist

    main

    After setting up your project, perform the following steps to personalize it:

    • Change the author name in LICENSE.
    • Change the title in App.vue.
    • Change the hostname in vite.config.ts.
    • Change the favicon in the public directory.
    • Remove the .github folder (contains funding info).
    • Clean up the READMEs and remove default routes.

  10. Configure Vitesse project checklist

    main

    When using this template, update the following items to personalize your project:

    • Change author name in LICENSE
    • Change title in App.vue
    • Change hostname in vite.config.ts
    • Change favicon in public/ directory
    • Remove sponsorship information in .github/ folder
    • Clean up README and remove unused routes

  11. Clone Vitesse to local

    main

    To start a new project with a clean git history, use degit to clone the template and pnpm to install dependencies. Ensure you have Node.js version >= 14.18 installed.

    npx degit antfu-collective/vitesse my-vitesse-app
cd my-vitesse-app
pnpm i
    npx degit antfu-collective/vitesse my-vitesse-app
cd my-vitesse-app
pnpm i # 如果你没装过 pnpm, 可以先运行: npm install -g pnpm