CODEWITHSUNDEEP
typescriptvue.jsvue-component
Ratbwoi
Ratbwoi

Reputation: 102

Module has no exported Member Vue3

I need some help with a Vue component.

I'm getting this error:

Failed to compile.

src/components/Btn/Btn.vue:11:14
TS2305: Module '"../../typings/button-type"' has no exported member 'ButtonType'.
     9 |     import { defineComponent, computed } from '@vue/runtime-core';
  > 11 |     import { ButtonType } from '@/typings/button-type';
       |              ^^^^^^^^^^
    12 | // components
    13 |
    14 |     export default defineComponent({

I'm trying to create my own type in Ts in a separate file and import it in my component.

Type:

export namespace ButtonType {

export type Button = {
size: Size;
type: Type;
 }
}

type Size = 'sm' | 'md' | 'lg';
type Type = 'primary' | 'accent' | 'subtle';

And in my component I have the following:

   import { ButtonType } from '@/typings/button-type';
// components

export default defineComponent({
    name: 'Btn',
    components: {},
    props: {
        size: {
            default: 'md',
        } as ButtonType.Button.size,
        type: {
            default: 'primary',
        } as ButtonType.Button.type,
    }

I've tried ButtonType.Button['size'] but didn't work neither.

I have some computed data etc but not relevant to the case. The main idea was to create a Type so I can identify errors when setting a wrong size or type for the button component.

Any idea of what is going on?

Upvotes: 0

Views: 1534

Answers (1)

tauzN
tauzN

Reputation: 6931

Vue uses PropType for prop types

import { defineComponent, PropType } from 'vue'
import { ButtonType } from '@/typings/button-type';

export default defineComponent({
    props: {
        size: {
            default: "md",
            type: String as PropType<ButtonType['Button']['size']>
        },
        type: {
            default: "primary",
            type: String as PropType<ButtonType['Button']['type']>
        }
    }
  }
})

Upvotes: 1

Related Questions