- Support Vue
- The Vue Instance
- Template Syntax
- Computed Properties and Watchers
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Event Handling
- Form Input Bindings
Transitions & Animation
- Enter/Leave & List Transitions
- State Transitions
Reusability & Composition
- Custom Directives
- Render Functions & JSX
- Production Deployment
- Single File Components
- Unit Testing
- TypeScript Support
- State Management
- Server-Side Rendering
- Reactivity in Depth
- Migration from Vue 1.x
- Migration from Vue Router 0.7.x
- Migration from Vuex 0.6.x to 1.0
- Comparison with Other Frameworks
- Join the Vue.js Community!
- Meet the Team
In Vue 2.5.0+ we have greatly improved our type declarations to work with the default object-based API. At the same time it introduces a few changes that require upgrade actions. Read this blog post for more details.
A static type system can help prevent many potential runtime errors, especially as applications grow. That’s why Vue ships with official type declarations for TypeScript - not only in Vue core, but also for vue-router and vuex as well.
Since these are published on NPM, and the latest TypeScript knows how to resolve type declarations in NPM packages, this means when installed via NPM, you don’t need any additional tooling to use TypeScript with Vue.
We also plan to provide an option to scaffold a ready-to-go Vue + TypeScript project in
vue-cli in the near future.
Note that you have to include
strict: true (or at least
noImplicitThis: true which is a part of
strict flag) to leverage type checking of
this in component methods otherwise it is always treated as
See TypeScript compiler options docs for more details.
For developing Vue applications with TypeScript, we strongly recommend using Visual Studio Code, which provides great out-of-the-box support for TypeScript.
WebStorm also provides out-of-the-box support for both TypeScript and Vue.js.
To let TypeScript properly infer types inside Vue component options, you need to define components with
If you prefer a class-based API when declaring components, you can use the officially maintained vue-class-component decorator:
Plugins may add to Vue’s global/instance properties and component options. In these cases, type declarations are needed to make plugins compile in TypeScript. Fortunately, there’s a TypeScript feature to augment existing types called module augmentation.
For example, to declare an instance property
$myProperty with type
After including the above code as a declaration file (like
my-property.d.ts) in your project, you can use
$myProperty on a Vue instance.
You can also declare additional global properties and component options:
The above declarations allow the following code to be compiled:
Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of certain methods. For this reason, you may need to annotate the return type on methods like
render and those in
If you find type inference or member completion isn’t working, annotating certain methods may help address these problems. Using the
--noImplicitAny option will help find many of these unannotated methods.