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

tony19 · Accepted Answer · 2022-07-16 00:05:36Z

2

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 {}

edited Jul 16, 2022 at 0:05

answered Mar 7, 2020 at 3:36

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

asus Over a year ago

Yes that solution is correct however what worked for me was including the above code in my log.ts file instead of splitting it into a .d.ts file. Same as this guy stackoverflow.com/a/54656902/8518207

tony19 Over a year ago

If you add a .d.ts file, make sure it's in the source path configured in tsconfig.json for tsc (and Intellisense) to find it. Putting it in src/ works for Vue CLI projects.

Collectives™ on Stack Overflow

Vue typescript plugin

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related