Overview

The VueJS Template 3 is a starter template for developing applications with Vue 3 using Vite. It provides a recommended IDE setup, TypeScript support for .vue imports, and includes several built-in features and libraries such as Pinia, Vee-Validate, Vue-i18n, Vue-Router, Eslint, Prettier, Vitest, Husky, and GitHub Actions. The template aims to streamline the project setup process and provides a roadmap for adding key features such as internationalization, routing, form validation, unit testing, and more.

Features

• Recommended IDE Setup: The template suggests using VSCode with the Volar extension instead of Vetur for better TypeScript support.
• Type Support for .vue Imports in TS: TypeScript doesn’t natively handle type information for .vue imports, so the template uses vue-tsc instead of tsc for type checking and requires TypeScript Vue Plugin (Volar) for proper .vue type awareness.
• Customize Configuration: The template allows customization of Vite configurations according to project requirements.
• Global Components: Global components can be declared in the components.d.ts file and requires a restart of the Vue server for changes to take effect.
• Built with TypeScript: The template is built using TypeScript, providing enhanced type checking and code readability.
• Pinia: The template includes Pinia, a Vue state management library, for managing application state.
• Vee-Validate + Yup: Form validation is supported through the integration of Vee-Validate and Yup.
• Vue-i18n: Internationalization support is provided through the integration of Vue-i18n.
• Vue-Router: Routing capabilities are included through the integration of Vue-Router.
• Eslint + Prettier: Eslint and Prettier are pre-configured in the template to ensure code quality and consistency.
• Vitest: The template includes Vitest, a Vue testing library, for unit testing.
• Husky: Husky is included for pre-commit and pre-push git hooks to enforce code quality checks before committing or pushing code.
• GitHub Actions: GitHub Actions workflows are set up for running tests on pull requests, ensuring code quality and preventing breaking changes.

Installation

To install and use the VueJS Template 3, follow these steps:

1. Set up the recommended IDE setup by installing VSCode and the Volar extension. Disable the built-in TypeScript extension by following these steps:

   • Open the VSCode command palette by pressing Ctrl + Shift + P or Cmd + Shift + P on macOS.
   • Search for “Extensions: Show Built-in Extensions” and select it.
   • Find “TypeScript and JavaScript Language Features” in the list, right-click, and select “Disable (Workspace)”.
   • Reload the VSCode window by running “Developer: Reload Window” from the command palette.

2. Clone the template repository and navigate to the project directory.

3. Customize the Vite configuration according to your project requirements.

4. Declare all global components in the components.d.ts file.

5. Restart the Vue server by running “Ctrl + Shift + P” or “Cmd + Shift + P” and selecting “Restart Vue Server”.

6. Begin developing your Vue 3 application using the template as a starting point.

Summary

The VueJS Template 3 provides a comprehensive starting point for developing Vue 3 applications using Vite. It includes recommended IDE setups, TypeScript support for .vue imports, and pre-configured features such as Pinia, Vee-Validate, Vue-i18n, Vue-Router, Eslint, Prettier, Vitest, Husky, and GitHub Actions. The template aims to streamline project setup and provides a roadmap for adding key features and testing workflows.