Refactor Plugins and Directives to Provide a Path for Vue3

[rak-phillip]

Vue 2.x has a number of global APIs and configurations that globally mutate Vue’s behavior. This is no longer an option in Vue 3. Any APIs that globally mutate Vue's behavior in Vue 2 are now moved to the app instance, exposed via createApp.

This means that patterns currently used to register plugins

// Vue 2 - Current plugin registration
import Vue from 'vue';

...
Vue.prototype.t = function(key, args, raw) {
  return stringFor(this.$store, key, args, raw);
};

Will need to include a install function in Vue 3

// Vue 3
install(app) {
    app.config.globalProperties.t = function(key, args, raw) {
      return stringFor(this.$store, key, args, raw);
    };
   ...
}

We can utilize a similar pattern in our code today to make the migration more straightforward

// Vue 2
install(Vue) {
    Vue.prototype.t = function(key, args, raw) {
      return stringFor(this.$store, key, args, raw);
    };
    ...
}

Refactor Plugins

Plugins Globally Mutating Vue in multiple ways

Candidates for writing an install function

• Refactor shell/plugins/i18n.js plugin #10800

Plugins Globally Mutating Vue via Vue.component

Candidates for accepting a vue instance before modifying

• shell/plugins/global-formatters.js
• shell/plugins/v-select.js

Plugins Globally Mutating Vue via Vue.use

Candidates for accepting a vue instance before modifying

• shell/plugins/codemirror.js
• shell/plugins/portal-vue.js
• shell/plugins/portal.js
• shell/plugins/resize.js
• shell/plugins/shortkey.js
• shell/plugins/tooltip.js
• shell/plugins/vue-js-modal.js (No Vue 3 implementation. Should be removed)

Refactor Directives

Candidates for accepting a vue instance before modifying

• shell/plugins/clean-html-directive.js
• shell/plugins/clean-tooltip-directive.js
• shell/plugins/directives.js
• shell/plugins/int-number.js
• shell/plugins/positive-int-number.js
• shell/plugins/trim-whitespace.js

[rak-phillip]

Reopening issue, there are still 2 more PRs to address this.

[gaktive]

@nwmac we may need to check our actions since this ticket didn't move to QA. Maybe multiple PRs tied to this ticket?