Import vue module from another vue module in typescript
Could you please help import a Vuejs2 TypeScript2 component from another Vuejs2 component for TypeScript2?
Target Module (MyTable.vue)
<script lang="ts">
export default {}
</script>
Source module (App.vue)
<template>
<div>
<input v-model="msg">
<p>prop: {{propMessage}}</p>
<p>msg: {{msg}}</p>
<p>helloMsg: {{helloMsg}}</p>
<p>computed msg: {{computedMsg}}</p>
<button @click="greet">Greet</button>
<div class="container">
<my-vuetable></my-vuetable>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import MyVuetable from './MyTable.vue'
@Component({
props: {
propMessage: String
}
})
export default class App extends Vue {
propMessage: string
// inital data
msg: number = 123
// use prop values for initial data
helloMsg: string = 'Hello, ' + this.propMessage
// lifecycle hook
mounted () {
this.greet()
}
// computed
get computedMsg () {
return 'computed ' + this.msg
}
// method
greet () {
alert('greeting: ' + this.msg)
}
}
</script>
I am using the latest TS / Webpack / vue-loader / vue-class-component.
Please note that similar JS (not TS) based code works @ https://github.com/ratiw/vuetable-2-tutorial-bootstrap
All code @ https://github.com/borislitvak/vue-from-vue-question
Webpack result
App.vue.d.ts 211 bytes [emitted]
Entrypoint main = build.js build.js.map
[0] ./~/vue/dist/vue.runtime.esm.js 175 kB {0} [depth 1] [built]
[exports: default]
cjs require vue [3] ./~/ts-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./App.vue 19:12-26
cjs require vue [4] ./~/vue-class-component/dist/vue-class-component.common.js 12:26-40
cjs require vue [8] ./example.ts 3:12-26
[1] ./~/process/browser.js 5.3 kB {0} [depth 2] [built]
cjs require process [0] ./~/vue/dist/vue.runtime.esm.js 1:0-37
cjs require process [4] ./~/vue-class-component/dist/vue-class-component.common.js 1:0-37
[2] ./App.vue 1.38 kB {0} [depth 1] [built]
cjs require ./App.vue [8] ./example.ts 4:16-36
[3] ./~/ts-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./App.vue 2.09 kB {0} [depth 2] [built]
cjs require !!ts-loader!./node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue [2] ./App.vue 3:2-93
[4] ./~/vue-class-component/dist/vue-class-component.common.js 4.02 kB {0} [depth 3] [built]
cjs require vue-class-component [3] ./~/ts-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./App.vue 20:28-58
[5] ./~/vue-loader/lib/component-normalizer.js 1.12 kB {0} [depth 2] [built]
cjs require !./node_modules/vue-loader/lib/component-normalizer [2] ./App.vue 1:16-78
[6] ./~/vue-loader/lib/template-compiler.js?id=data-v-52143112!./~/vue-loader/lib/selector.js?type=template&index=0!./App.vue 1.12 kB {0} [depth 2] [built]
cjs require !!./node_modules/vue-loader/lib/template-compiler?id=data-v-52143112!./node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue [2] ./App.vue 5:2-152
[7] (webpack)/buildin/global.js 509 bytes {0} [depth 2] [built]
cjs require global [0] ./~/vue/dist/vue.runtime.esm.js 1:0-44
[8] ./example.ts 300 bytes {0} [depth 0] [built]
ERROR in ....\App.vue.ts
(20,24): error TS2307: Cannot find module './MyTable.vue'.
I'm new to client-side development, please help!
Thank,
Boris
source to share
The answer was provided by https://github.com/ktsn and the original can be found @ https://github.com/vuejs/vue/issues/5298 :
This is because you have no .vue file declarations, then the typescript compiler cannot load them. You need to declare a generic .vue file declaration in your project or create each .vue file declaration with vuetype
I double checked that the above works and then the general declaration path. Note that most vue components do not contain t.ds definitions, so you will have to write them for TS so they can compile the files.
Enjoy! Boris
source to share
If you put the following code in your custom.d.ts file in the same folder structure as your vue files, it should work. Boris put it nicely and basically the webpack doesn't recognize the definitions of the .vue file.
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
The problem was explained in my blog post here: https://danpottsdoes.wordpress.com/2017/09/28/unit-testing-vue-class-components-using-typescript-chai-sinon-my-findings
source to share