| .. | ||
| .github | ||
| LICENSE | ||
| package.json | ||
| README.md | ||
| tsconfig.dom.json | ||
| tsconfig.json | ||
| tsconfig.lib.json | ||
@vue/tsconfig
TSConfigs for Vue projects to extend.
Requires TypeScript >= 5.0. For TypeScript v4.5 to v4.9, please use v0.1.x. Requires Vue.js >= 3.3.
See below for the breaking changes in v0.3.x.
Installation
npm add -D @vue/tsconfig
Usage
Add one of the available configurations to your tsconfig.json:
The Base Configuration (Runtime-agnostic)
"extends": "@vue/tsconfig/tsconfig.json"
Configuration for Browser Environment
"extends": "@vue/tsconfig/tsconfig.dom.json"
Configuration for Node Environments
First install the base tsconfig and types for the Node.js version you are targeting, for example:
npm add -D @tsconfig/node22 @types/node@22
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/node22/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/node22/tsconfig.json",
  "@vue/tsconfig/tsconfig.json"
],
"compilerOptions": {
  "types": ["node"]
}
Make sure to place @vue/tsconfig/tsconfig.json after @tsconfig/node22/tsconfig.json so that it takes precedence.
Emitting Declaration Files
As most Vue projects are built with bundlers, the default Vue TSConfig does not emit declaration files. If you are building a library or a component library, you can enable declaration file emitting by also extending @vue/tsconfig/tsconfig.lib.json in your tsconfig.json:
"extends": [
  "@vue/tsconfig/tsconfig.dom.json",
  "@vue/tsconfig/tsconfig.lib.json"
]
Migrating from TypeScript < 5.0
- The usage of base 
tsconfig.jsonis unchanged. tsconfig.web.jsonis now renamed totsconfig.dom.json, to align with@vue/runtime-domand@vue/compiler-dom.tsconfig.node.jsonis removed, please read the Node.js section above for Node.js usage.
Some configurations have been updated, which might affect your projects:
moduleResolutionchanged fromnodetobundler. This aligns more closely to the actual resolution rules in modern bundlers like Vite. However, some existing code may be broken under this new mode- Most notably, it implies 
"resolvePackageJsonExports": trueby default, so it prefers theexportsfield ofpackage.jsonfiles when resolving a third party module.- Some third party packages may not have this field set up correctly, but the bugs were previously hidden by the 
nodemode. - Some notable packages include 
vue-i18n@9.2.2,vuetify@3.2.3,v-calendar@3.0.3, etc. - While 
vue-i18nhas fixed this issue in v9.3 beta, and vuetify will solve the issue in v3.3, other packages may not be so quick to fix. In that case, you can override thecompilerOptions.resolvePackageJsonExportsoption tofalsein yourtsconfig.jsonto temporarily work around the issue. - But we encourage you to submit PRs to these packages to fix the bugs, so that we can all move forward to the new resolution mode. You can use tools like 
publintand Are the types wrong? to help you find and debug the issues. 
 - Some third party packages may not have this field set up correctly, but the bugs were previously hidden by the 
 - Another small breaking change is that 
--moduleResolution bundlerdoes not support resolution ofrequirecalls. In TypeScript files, this means theimport mod = require("foo”)syntax is forbidden. 
- Most notably, it implies 
 - The 
liboption intsconfig.dom.jsonnow includesES2020by 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
liboption in yourtsconfig.json:{ "extends": "@vue/tsconfig/tsconfig.dom.json", "compilerOptions": { "lib": ["ES2016", "DOM", "DOM.Iterable"] } } 
 -