Possibility to Define Vue 3 Plugins

[achwilko]

New Feature Proposal

For more information, see the CONTRIBUTING guide.

Description

Would be great to have the possibility to define and use desired plugins while using Vue 3 ( eg. via piral-vue3/convert). Documentation regarding Vue 3 plugin usage can be found below:

• https://vuejs.org/guide/reusability/plugins#introduction

Background

There are a lot of useful plugins for Vue 3 (eg. https://tanstack.com/query/latest/docs/framework/vue/installation#vue-query-initialization) or i18n (https://i18next.github.io/i18next-vue/guide/started.html#setup) so would be great to have a possibility to use them per pilet/team.

Discussion

Link to Discord thread:

• https://discord.com/channels/1222632475449229352/1230135889146150933

[FlorianRappl]

I have released a draft for this. It uses a function called defineVue3Middleware. It works like this (excerpt from the README / documentation):

import { fromVue3, defineVue3Middleware } from 'piral-vue-3/convert';
import Page from './Page.vue';
import i18next from 'i18next';
import I18NextVue from 'i18next-vue';
import type { PiletApi } from 'sample-piral';

i18next.init({
  lng: 'de',
  interpolation: {
    escapeValue: false
  },
  fallbackLng: false,
  resources: {
    en: {
      translation: {
        greeter: "Welcome",
      },
    },
    de: {
      translation: {
        greeter: "Willkommen",
      },
    },
  }
});

export function setup(app: PiletApi) {
  defineVue3Middleware(vue => {
    vue.use(I18NextVue, { i18next });
  });
  app.registerPage('/sample', fromVue3(Page));
}

Here we integrate the i18next plugin using the i18next-vue package. By defining the middleware using the defineVue3Middleware and the provided callback, we can integrate the plugin without requiring any access to the original app instance of Vue.

(When not in a standalone pilet you can access the new defineVue3Middleware function also on the pilet API.)

What do you think about this design @achwilko ? Would that work? Anything to improve here?

[achwilko]

@FlorianRappl It's great! Many thanks for your work! 🍻 I'm just wondering, by defining the middleware with the provided callback, does it mean that we have also access to the Vue 3 createApp instance? I mean we can access not only vue.use() but also vue.provide() and others from createApp? Also, by defining the middleware we are doing that for all fromVue3 components in the scope of the pilet, right?

Once again many thanks for your time and help. I am so happy to see this proposal provided so quickly :)

[FlorianRappl]

I'm just wondering, by defining the middleware with the provided callback, does it mean that we have also access to the Vue 3 createApp instance? I mean we can access not only vue.use() but also vue.provide() and others from createApp?

Yes - this was the idea (otherwise I'd just have it called defineVue3Plugins or so). You can set Vue up as you'd like.

Also, by defining the middleware we are doing that for all fromVue3 components in the scope of the pilet, right?

Well, it depends. If you are using it "standalone" (as the example goes) you are making these plugins / middleware available to all components in the scope of the pilet. However, if you use this from a globally set up (i.e., pilet API extension) vue3 plugin you'll have this rolled out to all components.

Rolling it out to all components may not be what you want. Also, right now only one callback is acceptable; I think I would rebuild it such it accepts many callbacks (multiple plugins would want to add something).

The recommended way is the standalone way.

[achwilko]

Thanks @FlorianRappl for clarifications. The standalone approach is much much better in my opinion, so I would love to use it this way. Once again, many thanks! 🍻

[FlorianRappl]

Quick feedback @achwilko - have you tried the preview version? Does it work for you (or anything missing)?

[achwilko]

Hi @FlorianRappl wasn't aware of the preview version :) How can I get it (exact version)?

[FlorianRappl]

It's using the next tag on npm - current version is 1.5.4-beta.7016 (https://www.npmjs.com/package/piral-vue-3/v/1.5.4-beta.7016).

[achwilko]

Thanks @FlorianRappl , I've updated to use piral-vue-3@next (so it's using version 1.5.4-beta.7016) but after doing that all Vue3 components are not working (without any further changes). Should I also update other piral packages (not only piral-vue-3)?

As an example, the below code is not working (not_found is shown while trying to access /example):

import { fromVue3 } from 'piral-vue-3/convert';
import Example from './components/Example.vue';

export function setup(pilet: PiletApi) {
  pilet.registerPage('/example', fromVue3(Example));
}

Where Example.vue looks like below:

<template>
  <div class="example">Example test</div>
</template>

[FlorianRappl]

No it should be fine. Any error message?

[achwilko]

@FlorianRappl Unfortunately, no errors (during build and console) so have no idea how to debug it. I was testing usage in one of the pilet but maybe I should create a new piral project from scratch?

[achwilko]

OK, started to work while using only 1 pilet, so let me verify :)

[FlorianRappl]

I was testing usage in one of the pilet but maybe I should create a new piral project from scratch?

Should be fine. Are your pilets standalone or are they based / assume that Vue comes with the app shell?

[achwilko]

It's working perfectly :) I've tested TanStack Query Vue 3 plugin (https://tanstack.com/query/latest/docs/framework/vue/installation) and it's working as expected :) Many many many thanks for your work 🍻

[FlorianRappl]

Great news - so it's working now with multiple pilets, too? All problems solved?

[achwilko]

Exactly, it's working with multiple pilets but I had to update piral-vue-3 to use the next version in each of them because my usage is like below:

"scripts": {
  "start": "pilet debug --port 8080 --open . ../mf2 ../mf3",
}

So all above pilets (current, mf2 and mf3) need to use piral-vue-3@next to work correctly :)