Using externally defined component with Vue and TypeScript class decorator syntax

Question

I'm trying to consume vue-form-wizard in a Vue component, using the TypeScript decorator syntax enabled by vue-class-component.

Here is my .vue file:

<template>
    <form-wizard>
        <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>
    </form-wizard>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from "vue-class-component";
import { FormWizard, TabContent} from "vue-form-wizard";

@Component({
    components: {
        FormWizard, TabContent
    }
})
export default class AdvisorWizard extends Vue {
}
</script>

And here is the error TypeScript generates:

Argument of type '{ components: { FormWizard: typeof FormWizard; TabContent: typeof TabContent; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?

I'm pretty sure that this is because FormWizard doesn't extend or otherwise implement Vue. But I can't figure out how to cast the component or otherwise coerce TypeScript into believing that FormWizard is a Vue component.

Is it possible that the typings for FormWizard are just wrong?

export type ShapeType = 'circle' | 'square' | 'tab'
export type LayoutType = 'vertical' | 'horizontal'
export type StepSizeType = 'xs' | 'sm' | 'md' | 'lg'

export declare class Wizard {
  /** Wizard title */
  title: string
  /** Wizard subtitle */
  subtitle: string
  nextButtonText: string
  backButtonText: string
  finishButtonText: string
  /** Whether to hide footer buttons */
  hideButtons: boolean
  /** Whether to trigger beforeChange function when navigating back */
  validateOnBack: boolean
  /** Active step and button color */
  color: string
  /** Step color when the current step is not valid */
  errorColor: string
  /** Main step shape */
  shape: ShapeType
  /** Wizard layout */
  layout: LayoutType
  /** Additional css classes for steps */
  stepsClasses: string[]
  /** Step size */
  stepSize: StepSizeType
  /** Step transition from inactive to active */
  transition: string
  /** Tab index where the wizard should start */
  startIndex: number
}

If so, what can I do to fix it?

tony19 · Accepted Answer · 2019-06-06 22:06:57Z

4

The type definitions in vue-form-wizard were updated to address this problem, but never released. You can manually install the GitHub commit that includes the changes, using this command:

npm i -S git://github.com/BinarCode/vue-form-wizard#c686975

answered Jun 6, 2019 at 22:06

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David W Gray Over a year ago

Thanks - this looks like exactly what I was looking for. I was able to install the version of vue-form-wizard that you pointed to and reading through the type declarations & exports it sure seems like FormWizard and TabContent extend Vue. But I am still getting the exact same error. Any thoughts on what else I might be doing?

tony19 Over a year ago

@DavidWGray Hmm. Do you have a GitHub link I can look at to reproduce the problem?

David W Gray Over a year ago

I stand corrected. This does work. Apparently, something was being cached inappropriately. I copied my project to create a minimum reproducible case to upload to github, opened it in vscode and the error was gone. Then I just tried reloading vscode on the original project and things worked there. So I'm set. Thanks for your help!

tony19 Over a year ago

@DavidWGray No problem :)

Collectives™ on Stack Overflow

Using externally defined component with Vue and TypeScript class decorator syntax

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related