Possibility to Define Vue 3 Plugins about piral HOT 15 CLOSED

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?

from piral.

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.

from piral.

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! 🍻

from piral.

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).

from piral.

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?

from piral.

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 🍻

from piral.

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 :)

from piral.

@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 :)

from piral.

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

from piral.

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

from piral.

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>

from piral.

No it should be fine. Any error message?

from piral.

@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?

from piral.

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

from piral.

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

from piral.