vue-project

This template should help get you started developing with Vue 3 in Vite.

Dependencies

• Node
• Pnpm -> Note you only need to use Pnpm for installing (running/testing with npm is fine)

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + Prettier

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

pnpm install

Compile and Hot-Reload for Development

npm run serve

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Technology Stack:

• Vue 3 - SPA framework
  • https://vuejs.org/guide/introduction.html
  • The core library that the project revoles around, allows developers to create components and compose them.
• Vite 4 - Blazing fast(TM) SPA builder tool
  • https://vitejs.dev/guide/
  • Provides the development server and building features, has really fast hot module reloading (HMR) which recompiles the project on saving code changes.
• Typescript
  • https://www.typescriptlang.org/docs/
  • A typed superset language of Javascript
• Vuetify 3 - Component library based on Material
  • https://vuetifyjs.com/en/introduction/why-vuetify/
  • A component library tailored for Vue, large catalogue of components with a great API
• Pinia - State management library
  • https://pinia.vuejs.org/introduction.html
  • State management allows you to store the application's data
  • Serves as the foundation for the flux pattern, which is a recommended way for implementing data flow in a web application (https://facebook.github.io/flux/docs/in-depth-overview/)
• Vue Router 4 - Routing library to nagivate between pages and provide url metadata
  • https://router.vuejs.org/introduction.html
  • Web apps often need more than one page, this is what you use for Vue
• pnpm - Node package manager
  • https://pnpm.io/installation
  • It is recommended that developers use PNPM instead of NPM as it provides faster install times and a smaller node_modules directory
• Vitest - Vite based testing library used for unit and component tests
  • https://vitest.dev/guide/why.html
  • Testing of logic and components is important, having HMR for your tests is also very convenient
• Volar - IDE support for Vue in VS Code
  • A minimal configuration is provided for Volar, and the code is Volar ready (AKA less Vue/TS problems like devs tended to have with Vue 2/Vetur)
• Vue-tsc - Volar based command line typechecking for Vue
  • https://github.com/vuejs/language-tools/tree/master/packages/vue-tsc
  • Any errors Volar is able to pickup, can be invoked via this command line tool. This is great as a git pre-commit hook or a type checking stage on in the CI/CD pipeline (Jenkins for example).