TSConfigs for Vue projects to extend.
Requires TypeScript >= 5.0. For TypeScript v4.5 to v4.9, please use v0.1.x.
See below for the changes in v0.2.x.
npm add -D @vue/tsconfig
Add one of the available configurations to your tsconfig.json
:
"extends": "@vue/tsconfig/tsconfig.json"
"extends": "@vue/tsconfig/tsconfig.dom.json"
First install the base tsconfig and types for the Node.js version you are targeting, for example:
npm add -D @tsconfig/node18 @types/node@18
If you are not using any bundlers, the Node.js code doesn't rely on any Vue/Vite-specific features, then these would be enough, you may not need to extend the Vue TSConfig:
"extends": "@tsconfig/node18/tsconfig.json",
"compilerOptions": [
"types": ["node"]
]
Otherwise, if you are trying to use Vue components in Node.js environments (e.g. Server Side Rendering, Vitest, etc.), you will need to extend the Vue TSConfig along with the Node.js TSConfig:
"extends": [
"@tsconfig/node18/tsconfig.json",
"@vue/tsconfig/tsconfig.json"
],
"compilerOptions": [
"types": ["node"]
]
Make sure to place @vue/tsconfig/tsconfig.json
after @tsconfig/node18/tsconfig.json
so that it takes precedence.
- The usage of base
tsconfig.json
is unchanged. tsconfig.web.json
is now renamed totsconfig.dom.json
, to align with@vue/runtime-dom
and@vue/compiler-dom
.tsconfig.node.json
is removed, please read the Node.js section above for Node.js usage.
Some configurations have been updated, which might affect your projects:
moduleResolution
changed fromnode
tobundler
- The
lib
option intsconfig.dom.json
now includesES2020
by default.-
Previously it was ES2016, which was the lowest ES version that Vue 3 supports.
-
Vite 4 transpiles down to ES2020 by default, this new default is to align with the build tool.
-
This change won't throw any new errors on your existing code, but if you are targeting old browsers and want TypeScript to throw errors on newer features used, you can override the
lib
option in yourtsconfig.json
:{ "extends": "@vue/tsconfig/tsconfig.dom.json", "compilerOptions": { "lib": ["ES2016", "DOM", "DOM.Iterable"] } }
-