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:

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)
Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

Structure of Vuejs 3 components and views in this project

For this document's needs components and views will be named "modules" even though this is not a correct term for these files officialy.

Main structure

Each file should start with <script> tag followed by <template> tag. If <style> tag is used (which should be avoided, this project uses Tailwind CSS for styling) it should be placed at the end of the file.

Scripts

Elements should be placed in this order:

Props - constant defined by defineProps function
Emits - constant defined by defineEmits function
Refs - contstans defined by ref functions with appropriate values
Other functions

Rules regarding functions:

Functions ought to have descriptive name
Ought to do one thing. ie. function fetchRequest should send request, but not prepare request body
In practice, if function has more than 10 SLoC, it probably should be split
DO NOT use "any" type. Just don't.
Function used in current function should be placed below it (if posible, as function can be called from many places in the code)

README.md

Modern frontend for Release 11 Tools

Recommended IDE Setup

Type Support for .vue Imports in TS