Error on local component registration [Typescript]

[hlgkb]

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]

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]

Same issue :/