CODEWITHSUNDEEP
typescriptvue.jsvuejs3
Coli
Coli

Reputation: 1031

Augmenting Types for Use with Plugins for Vue 3

At first: I'm aware that there is an similar issue (Question about Vue 3 + TypeScript and Augmenting-Types-for-Use-with-Plugins) but it was closed erroneously.

For Vue 2 there is an entry in the documentation for using plugins together with typescript: Augmenting Types for Use with Plugins, but for Vue 3 isn't.

To sum up, what I want to achieve: I want to use my plugin as this.$my-plugin() in a components defineComponent() but I'm getting the error Property '$my-plugin' does not exist on type 'ComponentPublicInstance[...] when I follow the guide for Vue 2. So I assume the syntax for the .d.ts file must be changed. My current file:

import { Vue } from 'vue';

import MyPlugin from './my-plugin';

declare module 'vue/types/vue' {
    interface Vue {
        $my-plugin: MyPlugin
    }
}

Upvotes: 1

Views: 1323

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

In main.ts add ComponentCustomProperties inside '@vue/runtime-core' module:

import { createApp } from 'vue'
import App from './App.vue'
import MyPlugin from './my-plugin';
...

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties  {
     $myPlugin: MyPlugin //don't use kebab-case as key in js
     }
   }
let app=createApp(App)
app.config.globalProperties.$myPlugin= MyPlugin ;

app.mount('#app')

Upvotes: 4

Related Questions