- The Vue Instance
- Template Syntax
- Computed Properties and Watchers
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Event Handling
- Form Input Bindings
- Reactivity in Depth
- Transition Effects
- Transitioning State
- Render Functions
- Custom Directives
- Single File Components
- Production Deployment Tips
- State Management
- Unit Testing
- Server-Side Rendering
- TypeScript Support
- 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.2.0+ we introduced dist files exposed as ES modules, which will be used by default by webpack 2. Unfortunately, this introduced an unintentional breaking change because with TypeScript + webpack 2,
import Vue = require('vue') will now return a synthetic ES module object instead of Vue itself.
We plan to move all official declarations to use ES-style exports in the future. Please see Recommended Configuration below on a future-proof setup.
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.
allowSyntheticDefaultImports option allows us to use the following:
The former (ES module syntax) is recommended because it is consistent with recommended plain ES usage, and in the future we are planning to move all official declarations to use ES-style exports.
In addition, if you are using TypeScript with webpack 2, the following is also recommended:
This tells TypeScript to leave the ES module import statements intact, which in turn allows webpack 2 to take advantage of ES-module-based tree-shaking.
See TypeScript compiler options docs for more details.
Vue’s type definition exports many useful type declarations. For example, to annotate an exported component options object (e.g. in a
Vue component options can easily be annotated with types:
Unfortunately, there are a few limitations here:
TypeScript can’t infer all types from Vue’s API. For example, it doesn’t know that the
messageproperty returned in our
datafunction will be added to the
MyComponentinstance. That means if we assigned a number or boolean value to
message, linters and compilers wouldn’t be able to raise an error, complaining that it should be a string.
Because of the previous limitation, annotating types like this can be verbose. The only reason we have to manually declare
messageas a string is because TypeScript can’t infer the type in this case.
@Component decorator. As an example, let’s rewrite the above component:
With this syntax alternative, our component definition is not only shorter, but TypeScript can also infer the types of
onClick without explicit interface declarations. This strategy even allows you to handle types for computed properties, lifecycle hooks, and render functions. For full usage details, see the vue-class-component docs.
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: