Vitesse Stackter Clean Architect
If you are really into the "Vitesse" starter template created by Anthony Fu (Vue core team member) but want to use the clean architectural pattern instead of monolithic architecture, then you can clone this repo and use your own project. Have fun !
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.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Apollo
Apollo is an open-source platform for building GraphQL APIs that connects with any data source. It provides a powerful set of tools and features for developers, including client and server-side caching, real-time data synchronization, and a seamless integration with popular frontend frameworks.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
