Use Vue-demi along with plugin installation

[alvarosabu]

Hi!

More than an issue is really a question on how to use this package when you have a plugin library more than just using a composition function like in the demo examples.

Motivation: Allow this library to be installable in both vue 2.x via Vue.use(VueLibrary) and in vue 3 using app.createApp(App).use(VueLirbary) instead of having each version in separate branches (main for 2.x, next for 3.x)

For vue 2.x my installation file looks something like this.

export function install(Vue) {
  if (install.installed && _Vue === Vue) return;
  install.installed = true;

  _Vue = Vue;

  Vue.prototype.$formUtils = utils;

  Vue.component('dynamic-form', DynamicForm);
  Vue.component('dynamic-input', DynamicInput);
}

export const AsDynamicForms = {
  install,
  version,
};

// Automatic installation if Vue has been added to the global scope.
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(AsDynamicForms);
}

Meanwhile for For vue 3.x:

export interface DynamicFormsOptions {
  autoValidate?: boolean;
  form?: FormOptions;
}

export interface DynamicFormsPlugin {
  options?: DynamicFormsOptions;
  install(app: App): void;
}

export function createDynamicForms(
  options?: DynamicFormsOptions,
): DynamicFormsPlugin {
  const vdf: DynamicFormsPlugin = {
    options,
    install(app: App) {
      const self = this;
      app.component('dynamic-form', DynamicForm);
      app.provide(dynamicFormsSymbol, self);
    },
  };

  return vdf;
}

My initial idea was to use vue-demi somehow in the code above to use Vue as a parameter in the install function instead of app, (maybe isVue3 flag) but not sure this is the right approach.

Any insight will be really appreciated, thanks in advance 🙇‍♂️

[antfu]

Hi, sorry I missed your issue. You can use createApp in Vue 2 (which is a wrapper for Vue) to achieve the isomorphic installation. Closing it for now, feel free to reopen or create a new one if you have further issues.