Vitesse Stackter Clean Architect

Overview

The “Vitesse” starter template created by Anthony Fu is a highly customizable and feature-rich Vue.js template that offers a clean architectural pattern for building web applications. It leverages the latest technologies such as Vue 3, Vite 2, pnpm, and ESBuild to provide a fast and efficient development experience. With file-based routing, components auto importing, and state management via Pinia, Vitesse offers a seamless and intuitive development process. It also includes a layout system, PWA support, and integration with Apollo GraphQL. Additionally, Vitesse provides support for internationalization, Markdown, and static-site generation. It is pre-packed with Tailwind CSS V3, offering a next-generation utility-first CSS framework for rapid website development. Vitesse also offers a wide range of plugins, including icon sets, routing, and Vue components auto import. It supports various coding styles, including Composition API with <script setup> SFC syntax and ESLint with @antfu/eslint-config.

Features

• Vue 3, Vite 2, pnpm, ESBuild - Built with fastness in mind.
• File based routing - Organize routes based on file structure.
• Components auto importing - Auto import components for ease of use.
• State Management via Pinia - Intuitive and type-safe store for Vue.
• Layout system - Simplify design with a layout system.
• PWA - Progressive Web App support for offline usage.
• Tailwind CSS V3 - Next generation utility-first CSS framework.
• Use icons from any icon sets - Iconify and unplugin-icons integration.
• I18n ready - Internationalization support with Vue I18n.
• Apollo GraphQL - Shipped with Apollo GraphQL for advanced data handling.
• Markdown Support - Support for Markdown as components or components in Markdown.
• Use the new <script setup> syntax - Take advantage of the new script setup syntax in Vue 3.
• Reactivity Transform enabled - Optimize reactivity with Reactivity Transform enabled.
• APIs auto importing - Directly use Composition API and other APIs without importing.
• Static-site generation(SGG) via vite-ssg - Generate static sites with vite-ssg.
• Critical CSS via critters - Optimize critical CSS rendering with critters.
• TypeScript - TypeScript support out of the box.
• Unit Testing with Vitest, E2E Testing with Cypress - Perform unit and E2E testing using Vitest and Cypress, respectively.
• Deploy on Netlify - Deployment made easy with zero-config deployment on Netlify.
• Pre-packed UI Frameworks - Includes Tailwind CSS V3 for rapid website development.
• VS Code Extensions - Various VS Code extensions for enhanced development experience.

Installation

To install the Vitesse starter template, follow these steps:

1. Clone the repository: git clone https://github.com/antfu/vitesse.git
2. Install dependencies using pnpm: pnpm install
3. Start the development server: pnpm dev

Summary

The Vitesse starter template is a powerful and highly customizable Vue.js template that offers a clean architectural pattern for building web applications. It leverages the latest technologies and provides a wide range of features, including file-based routing, components auto importing, state management, PWA support, and integration with Apollo GraphQL. With support for internationalization, Markdown, and static-site generation, Vitesse caters to various development needs. It also comes pre-packed with Tailwind CSS V3, offering a modern CSS framework for rapid website development. Overall, the Vitesse template provides developers with a solid foundation and a rich set of tools to create high-quality Vue.js applications.