TypeScript declaration file that allows using import
with *.vue
files. The primary use case is a bundler environment like Browserify with vueify. The file itself consists of 5 lines; this package is just for convenience.
This package requires TypeScript 2 and Vue.js 2, which ships with new type definitions in the Vue.js package itself. Both must be installed separately in your project, which allows choosing a suitable version.
-
Install:
npm install vue-typescript-import-dts --save-dev
-
Import (one of):
- Import this module before the import of a
.vue
file:import 'vue-typescript-import-dts'
- ... or include it in the
types
field of yourtsconfig.json
to globally allow using import with.vue
files in your project:
- Import this module before the import of a
{
"compilerOptions": {
"types": ["vue-typescript-import-dts"],
...
Then, it is possible to import
a *.vue
file
import Child = require('./child.vue')
// or
import * as Child from './child.vue'
Note: TypeScript will not type check, parse, or even verify the existence of the .vue
file: this project only instructs the TypeScript compiler to assume the import of 'something' that ends with .vue
succeeds and is a Vue.ComponentOptions<Vue>
object.
If you are using TypeScript 2 together with Vue.js 2, you might also be interested in
- vue-typescript-component to use TypeScript classes as Vue.js components
- vue-typescript-jest to test Vue.js components and TypeScript sources using Jest
- vue-jest-utils to simplify snapshot testing of Vue.js components using Jest and html2jade
- vue-typescript-component-example as an example for this package and the projects above that shows a TypeScript/Tsify/Vue.js/Vueify/Pug setup supporting Hot Module Replacement and unit/snapshot testing with Jest