Call plugin object from component in Vue.js 2 with typescript

Question

I created a plugin object for the regex I use in my app so I can use them in a global way. Something like this:

import Vue from "vue";

Vue.prototype.$regex = { 
  //isEmail function here
}

In javascript this code works. However in my new typescript project once I do:

methods: {
  isEmail(string: string): boolean {
    return this.$regex.isEmail(string)
  }
}

I get:

Property '$regex' does not exist on type 'CombinedVueInstance<Vue...

What's the correct way of using my plugin in a Vue.js 2 with typescript project?

jogarcia · Accepted Answer · 2022-07-27 03:28:46Z

1

I think, error happens because typescript does not know about your $regex in Vue's object prototype.

You can create file that will be included by typescript, for example types.d.ts in src directory, and put you type definition of $regex

import Vue from "vue";

declare module 'vue/types/vue' {
  export interface Vue {
    $regex: { isEmail: (some: string) => bool }
  }
}

ref: https://github.com/vuetifyjs/vuetify/blob/648799021a890f652f6eb6dd96713cb811c3efa6/packages/vuetify/types/index.d.ts#L60

edited Jul 27, 2022 at 3:28

jogarcia

2,8512 gold badges26 silver badges47 bronze badges

answered Jul 19, 2022 at 20:01

Фарид Ахмедов

8925 silver badges11 bronze badges

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

1 Comment

jogarcia Over a year ago

This almost worked. There is only one detail missing. You have to import Vue in the file like so: import Vue from "vue"; otherwise it just won't work. That step isn't optional.

Collectives™ on Stack Overflow

Call plugin object from component in Vue.js 2 with typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related