Vue Enterprise Boilerplate screenshot

Vue Enterprise Boilerplate

Author Avatar Theme by Bencodezen
Updated: 15 May 2024
7794 Stars

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

Categories

Overview:

Vue Enterprise Boilerplate v3 (alpha) is an opinionated architecture and development environment for creating Vue 3 + Vite SPA projects. It is currently in active development and considered an alpha release. The boilerplate is built upon the work of Chris Fritz and is a comprehensive solution for building enterprise-level Vue applications.

Features:

  • Opinionated architecture for Vue 3 + Vite SPA projects using create-vue.
  • Recommended IDE setup with VSCode + Volar (disabling Vetur) + TypeScript Vue Plugin (Volar).
  • Type support for .vue imports in TypeScript with the use of vue-tsc for type checking.
  • Take Over Mode in Volar for improved performance.
  • Project setup with options for development, production, unit testing with Vitest, end-to-end testing with Playwright, and linting with ESLint.

Installation:

To install the Vue Enterprise Boilerplate v3, follow these steps:

  1. Ensure you have Node.js installed on your machine.
  2. Clone the repository from the GitHub page.
  3. Open the project in your preferred IDE (recommended: VSCode).
  4. Install the required dependencies by running the following command in the terminal:
    npm install
    
  5. Customize the configuration files as needed.
  6. Start the development server with hot-reload by running:
    npm run dev
    
  7. For production builds, type-check, compile, and minify the code by running:
    npm run build
    
  8. Run unit tests with Vitest:
    npm run test:unit
    
  9. Run end-to-end tests with Playwright:
    npm run test:e2e
    
  10. Lint the code with ESLint:
    npm run lint
    

Summary:

Vue Enterprise Boilerplate v3 is a comprehensive solution for developing Vue 3 + Vite SPA projects. It provides an opinionated architecture and development environment, taking advantage of the latest tools and technologies. The installation process is straightforward, and the boilerplate offers various features such as type support, hot-reloading, unit and end-to-end testing options, and linting. It is a valuable resource for building enterprise-level Vue applications.