How to make a custom decorator globally available to a vue.js 2 app?

Question

I created a typescript decorator that adds some additional arguments to the method passed. It works completely fine without the decorator using optional parameters. Most of the times these parameters are not needed to be passed but once in a while these parameters are needed to be passed.

However I see that other developers don't know what the other argument to pass are unless they see the implementation or jsdoc of the method, which they shouldn't be concerned with.

So I created a decorator that will add the parameters in correct order and correct state. Everything works fine however now everyone has to remember to add an additional import to MyDecorator. So I want to make this decorator globally available.

Also in our app we are using decorators for creating components, props, getters, actions. It would be nice if I can make these global too. Almost all our component uses those and putting an import each time is just boilerplate. (nothing wrong with it, just makes it easier for all of us)

This is an example of the app's component syntax with the decorator in pseudo code.

<script lang="ts">
  import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
  import { MyDecorator } from './src/utils';
  import { Getter } from 'vuex-class';

  @Component({})
  export default class MyComponent extends Vue {
    @Getter('something', { namespace: 'whatever' })
    something: number;

    mounted() {
      @MyDecorator()
      doSomething('do it please');
    }
  }
</script>

How all vue components can get the decorators available without using the import? Is it possible?

Answer 1

After @LShapz's comment I saw that using a plugin can do it. I still need to import Vue though.

import { Component } from 'vue-property-decorator';
import { MyDecorator } from '@/src/utils';

const MyPlugin: any = {};
MyPlugin.install = (Vue, options) => {

   Vue.Awesome =  Component; // this I will never use as it will require to edit all files in my project

   Vue.MyDecorator = MyDecorator;
   Vue.prototype.MyProtoDecorator = MyDecorator;
};
// the MyPlugin can be placed on another file and exported    

Vue.use(MyPlugin);

To use it :

<script lang="ts">
    import { Vue } from 'vue-property-decorator';
    import { Getter } from 'vuex-class';

    @Vue.Awesome({}) // this is to show it is possible. Not practical
    export default class MyComponent extends Vue {
    @Getter('something', { namespace: 'whatever' })
    something: number;

    mounted() {
      @Vue.MyDecorator() // this is the thing that is practical for my case
      doSomething('done it somehow');

      @this.MyProtoDecorator() // second way
      doSomething('done again');

    }
  }
</script>