Vue typescript plugin

Question

I am writing a vue logger plugin

export default new (class NestLogger {
  public install(Vue: any) {
    Vue.prototype.$log = this;
  }

  error(text: string) {
      console.log(text)
  }
})();

in main.ts

import logger from "./plugins/logger";
Vue.use(logger);

But in components I cannot reference this.$log - why?

In Login.vue

this.$log.error("bla"); 

Error: Property $log does not exist on type Login

Answer 1

You need to augment the vue type definitions in a .d.ts file to include the type definition for $log:

// src/my-log-plugin.d.ts
import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $log: {
      error: (message: string) => void
    }
  }
}

export {}