How to use Virtual Components in Typescript?

[steveatkoan]

Hi

I'd like to set up virtual components https://vuetifyjs.com/en/features/global-configuration/#using-with-virtual-components but WebStorm reports the component as an unknown tag in a Single File Component. How do I tell typescript / WebStorm the component exists?

const vuetify = createVuetify({
  aliases: {
    VBtnPrimary: VBtn,
  },
  defaults: {
    VBtn: {
      class: ['text-none']
    },
    VBtnPrimary: {
      color: 'primary',
      variant: 'flat',
    }
  }
});

<template>
  <v-btn-primary text="Save" />
</template>

[mj2068]

yeah, i use vscode. i wonder is it even possible to provide editor support for virtual components?

[KaelWD]

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    VBtnPrimary: typeof import('vuetify/components/VBtn')['VBtn']
  }
}

[mj2068]

@KaelWD awesome, thank you Kael.

[pastukhvladyslav]

It didn't work for me. This is what worked for me (from another issue):

declare module '@vue/runtime-dom' {
  export interface GlobalComponents {
    VBtnPrimary: typeof import('vuetify/components')['VBtn']
  }
}

export {}