DOCSEARCHbyAlgolia
Submit Docs

Vitesse Lite

repository·main·Indexed 23 days ago

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

A lightweight, high-performance Vue 3 starter template built with Vite, pnpm, and ESBuild. It provides a streamlined development experience by focusing on core essentials and removing complex features like i18n, SSG, PWA, and Markdown. Key features include file-based routing via unplugin-vue-router, auto-importing components and APIs, UnoCSS for styling, Iconify for icons, VueUse utilities, and Vitest for testing.

Tokens
2.6K
Snippets
7
Records
17
Agent score
78%

What's inside Vitesse Lite

  1. What is Vitesse Lite

    main
    Vitesse Lite is a lightweight, opinionated Vite starter template. It provides a fast development experience using Vue 3, Vite, pnpm, and ESBuild. It is designed to be a stripped-down version of the original Vitesse, focusing on core essentials while removing features like i18n, Layouts, SSG, PWA, and Markdown to keep the footprint minimal.

  2. Overview of Vitesse Lite

    main
    Vitesse Lite is a lightweight, opinionated starter template for Vue 3 projects. It is designed for speed and developer experience, utilizing Vite, pnpm, and ESBuild. It provides a streamlined version of the original Vitesse template by removing complex features like i18n, layouts, SSG, PWA, and Markdown support to focus on a core, fast development workflow.

  3. Core features and pre-configured plugins

    main

    Vitesse Lite comes pre-configured with several tools to streamline development:

    Routing and Components

    • File-based routing: Uses Vue Router with routing defined by the file system in ./src/pages.
    • Component auto-import: Uses unplugin-vue-components to automatically load components from ./src/components.
    • Auto-importing APIs: Uses unplugin-auto-import so you can use Composition API functions directly without manual imports.

    Styling and Icons

    • UnoCSS: A high-performance, flexible atomic CSS engine.
    • Icons: Supports Iconify and UnoCSS preset-icons for using any icon set (browse icons at Icônes).

    Utilities and Language

    • Vue Macros: Uses unplugin-vue-macros to extend Vue with more macros and syntactic sugar.
    • VueUse: Includes the VueUse collection of practical Composition API utilities.
    • TypeScript: Full TypeScript support.
    • Vitest: Pre-configured for unit and component testing.
    • Deployment: Zero-config deployment to Netlify.

  6. Core features and pre-packed technologies in Vitesse Lite

    main

    Vitesse Lite comes pre-configured with several powerful tools to enhance your development workflow:

    Routing and Components

    • File-based routing: Uses Vue Router with routing defined by the files in ./src/pages.
    • Auto-importing:
      • Components in ./src/components are automatically imported.
      • Uses unplugin-auto-import to allow direct use of the Vue Composition API and other utilities without manual import statements.
      • Uses unplugin-vue-components for automatic component registration.

    Styling and Icons

    • UnoCSS: An instant, on-demand atomic CSS engine.
    • Icons:
      • Supports Iconify for accessing various icon sets.
      • Supports Pure CSS Icons via the UnoCSS preset-icons.

    Utilities and Macros

    • Vue Macros: Uses unplugin-vue-macros to extend Vue with additional macros and syntax sugar.
    • VueUse: Includes the VueUse collection of essential Composition API utilities.

    Testing and Deployment

    • Vitest: Used for unit and component testing.
    • Netlify: Optimized for zero-config deployment on Netlify.

  8. Use file-based routing for pages

    main
    Routes are automatically generated based on the Vue files located in the src/pages directory, following the file structure. This project uses unplugin-vue-router to manage the routing logic and integrates with vue router. To add a new route, simply create a new .vue file within the directory structure.

  9. Get started with Vitesse Lite

    main

    You can start a new project using Vitesse Lite in two ways: using the GitHub template or cloning manually via degit for a cleaner git history.

    Option 1: GitHub Template

    You can create a new repository directly from the GitHub template interface.

    Option 2: Manual Clone (Recommended for clean history)

    Run the following commands to scaffold your project locally:

    npx degit antfu-collective/vitesse-lite my-vitesse-app
cd my-vitesse-app
pnpm i

    Note: If you do not have pnpm installed, you can install it globally using npm install -g pnpm.

  10. Clone Vitesse Lite to local

    main

    To start a new project with a clean git history, you can use degit to clone the template. Ensure you have pnpm installed; if not, you can install it globally via npm install -g pnpm.

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

  12. Configure ESLint with @antfu/eslint-config

    main

    The project uses @antfu/eslint-config for linting. You can customize the configuration by passing an options object to the antfu() function in your eslint.config.js file.

    Available configuration options in this project include:

    • unocss: Enables UnoCSS-specific linting rules when set to true.
    • formatters: Enables ESLint formatters (e.g., for Prettier-like behavior) when set to true.
    • pnpm: Enables specific rules or configurations optimized for pnpm when set to true.
    import antfu from '@antfu/eslint-config'

export default antfu(
  {
    unocss: true,
    formatters: true,
    pnpm: true,
  },
)