title: Question about Vue 3 + TypeScript and Augmenting-Types-for-Use-with-Plugins
body: <p>Does anyone know of a working example of how the type augmentation should be implemented with Vue3 and TypeScript? I have been trying follow the Vue2 docs in hoops of using the same in Vue3 with no success and spend the past 3 hours of searching without any results.</p>
  <p>It seems that the <code>Vue</code> object in the <code>vue-class-component</code> module should be augmented to work,but how?</p>
  <p>My implementation is similar to the following:</p>
  <p>Any advice?</p>
  <p><a href="https://v2.vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins</a></p>
  <pre><code>import { App, Plugin } from &quot;vue&quot;;
  
  export interface IHelloModule {
    sayHello: (name: string) =&gt; string;
  }
  
  export const helloPlugin: Plugin = (app: App, options) =&gt; {
  
    const helloModule:IHelloModule = {
  
      sayHello: function(name: string) {
        return `Hello ${name}`;
      }
  
    };
  
    app.provide(&quot;$hello&quot;, helloModule);
  };
  </code></pre>
  <pre><code>import { Vue } from 'vue-class-component';
  import { IHelloModule } from &quot;@/hello&quot;;
  
  declare module &quot;vue/types/vue&quot; {
    interface Vue {
      $hello: IHelloModule;
    }
  }
  
  declare module &quot;vue/types/vue&quot; {
    interface VueConstructor {
      $auth: IHelloModule;
    }
  }
  </code></pre>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;home&quot;&gt;
       .....
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { Options, Vue } from 'vue-class-component';
  
  @Options({
    components: {
    },
  })
  export default class Home extends Vue {
    mounted() {
      console.log(this.$hello.sayHello(&quot;World&quot;))
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^
                       Neither TS nor vue-cli recognize this
    }
  }
  &lt;/script&gt;
  </code></pre>
  <pre><code>import { createApp } from &quot;vue&quot;;
  import App from &quot;./App.vue&quot;;
  import { helloPlugin } from &quot;./hello&quot;;
  import router from &quot;./router&quot;;
  
  createApp(App)
    .use(router, helloPlugin)
    .mount(&quot;#app&quot;);
  
  </code></pre>