Error on local component registration [Typescript]
Opened this issue · 2 comments
hlgkb commented
I am using Nuxtjs with Typescript. Here is the snippet of code:
<script lang="ts">
import Vue from "vue";
import { FormWizard, TabContent } from "vue-form-wizard";
import "vue-form-wizard/dist/vue-form-wizard.min.css";
export default Vue.extend({
name: "signup",
components: {
FormWizard, TabContent
}
});
</script>
And here is the error during the compilation:
TS2769: No overload matches this call.
The last overload gave the following error.
Type 'typeof FormWizard' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'.
Type 'typeof FormWizard' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 9 more.
Type 'typeof TabContent' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'.
Type 'typeof TabContent' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 9 more.
20 | name: "signup",
21 | components: {
> 22 | FormWizard, TabContent
| ^^^^^^^^^^
23 | }
24 | });
25 | </script>
But if I make a plugin for Nuxt and include it in nuxt.config.js for global component registration as below:
// plugins/vue-form-wizard.js
import Vue from 'vue'
import VueFormWizard from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
Vue.use(VueFormWizard)
export default {
plugins: [
'@/plugins/vue-form-wizard.js',
],
}
then there are no issues. Ideally I'd like to register as a local component but I keep getting the error I mentioned above.
Any insight would be appreciated.
productdevbook commented
And here is the error during the compilation:
TS2769: No overload matches this call. The last overload gave the following error. Type 'typeof FormWizard' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'. Type 'typeof FormWizard' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 9 more. Type 'typeof TabContent' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'. Type 'typeof TabContent' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 9 more. 20 | name: "signup", 21 | components: { > 22 | FormWizard, TabContent | ^^^^^^^^^^ 23 | } 24 | }); 25 | </script>
@hlgkb hi example used
// plugins/vue-form-wizard.js
import Vue from 'vue'
import VueFormWizard from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
Vue.use(VueFormWizard)
// nuxt.config.js
export default {
plugins: [
'~/plugins/vue-form-wizard',
],
}
example used
<template>
<div>
<form-wizard @on-complete="onComplete">
<tab-content title="Personal details"> My first tab content </tab-content>
<tab-content title="Additional Info"> My second tab content </tab-content>
<tab-content title="Last step">
Yuhuuu! This seems pretty damn simple
</tab-content>
<tab-content title="Last step">
Yuhuuu! This seems pretty damn simple
</tab-content>
</form-wizard>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'nuxt-property-decorator'
@Component({})
export default class Add extends Vue {
onComplete() {
alert('asdasd')
}
}
</script>
vvnsrzn commented
Same issue :/