I've been struggling to find a working example of how to implement type augmentation with Vue3 and TypeScript. I have searched for hours without success, trying to adapt the Vue2 documentation for Vue3.
It appears that the Vue object in the vue-class-component module needs to be augmented, but I'm unsure how to do it.
This is similar to my current implementation:
Any advice or guidance would be greatly appreciated.
https://v2.vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins
import { App, Plugin } from "vue";
export interface IHelloModule {
sayHello: (name: string) => string;
}
export const helloPlugin: Plugin = (app: App, options) => {
const helloModule:IHelloModule = {
sayHello: function(name: string) {
return `Hello ${name}`;
}
};
app.provide("$hello", helloModule);
};
import { Vue } from 'vue-class-component';
import { IHelloModule } from "@/hello";
declare module "vue/types/vue" {
interface Vue {
$hello: IHelloModule;
}
}
declare module "vue/types/vue" {
interface VueConstructor {
$auth: IHelloModule;
}
}
<template>
<div class="home">
.....
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
components: {
},
})
export default class Home extends Vue {
mounted() {
console.log(this.$hello.sayHello("World"))
^^^^^^^^^^^^^^^^^^^^^^^^^^
Neither TS nor vue-cli recognize this
}
}
</script>
import { createApp } from "vue";
import App from "./App.vue";
import { helloPlugin } from "./hello";
import router from "./router";
createApp(App)
.use(router, helloPlugin)
.mount("#app");