How to set plugins on a <b-modal>

[mateuswetah]

Hey guys, its me again 🥲

Not a bug this time, but a question.

It took me a while to understand but I see now how the current BModal is it's own Vue instance, thus any component or plugin registered to my original Vue with Buefy instance won't work on it. If I use the programmatic instantiation of the modal that is simple, I can obtain the returned object and register on it. But what if I'm just using the component <b-modal> directly in my template?

[kikuomax]

@mateuswetah As long as you embed <b-modal> in your template, plugins used by the app that is mounting the template are available for that <b-modal>. Only programmatically opened BModal has its own Vue app.

[kikuomax]

@mateuswetah Unfortunately, I do not think you can add plugins to a programmatically opened instance of BModal, because plugins are not installed into a Vue component instance but a Vue app. We may need an additional option to the open function to inject plugins.

[mateuswetah]

@mateuswetah As long as you embed <b-modal> in your template, plugins used by the app that is mounting the template are available for that <b-modal>. Only programmatically opened BModal has its own Vue app.

Ohh ok, I did not understood that at first!

[mateuswetah]

@mateuswetah Unfortunately, I do not think you can add plugins to a programmatically opened instance of BModal, because plugins are not installed into a Vue component instance but a Vue app. We may need an additional option to the open function to inject plugins.

Damn that is a serious issue then. I use it a lot for different cases like translation, store, capabilities... If we can think of a way to pass this as parameters would be very important

[mateuswetah]

Just reminded that Oruga also offers a programmatic launch of Modal:
https://oruga.io/components/Modal.html

Maybe take a look at their strategy?

[kikuomax]

@mateuswetah

Just reminded that Oruga also offers a programmatic launch of Modal: https://oruga.io/components/Modal.html

Maybe take a look at their strategy?

Right, they mimic what App.mount does. Clever!
https://github.com/oruga-ui/oruga/blob/4915c4dbcb1a6c2cd39bc7660d41916b330bc0cd/packages/oruga-next/src/components/modal/index.ts#L40-L45

https://github.com/vuejs/core/blob/2ffe3d5b3e953b63d4743b1e2bc242d50916b545/packages/runtime-core/src/apiCreateApp.ts#L333-L349

[kikuomax]

@wesdevpro @mateuswetah I am addressing the issue in #101.

I came up with a simple solution thanks to your information, @mateuswetah!

[mateuswetah]

Hi @kikuomax! Thank you for all the work being done here. I've been using the programmatic launch of modals and they are working well so far. One thing that is happening is a warning that appears only for programmatic launch, in all of my usages where I pass a custom component. For example:

The modal initialization would be something like this:

I'm sorry for posting questions here, but would you have any idea of which v-on it might be referring to?

[kikuomax]

@mateuswetah I confirmed that also happened in my project. I opened a new issue:

• Warning appears for programmatically opened Modal #182

[erasse]

@mateuswetah , @kikuomax from my observations, as a workaround an empty events object can be passed to modal, this should remove the warning

this.$buefy.modal.open({
     parent: this,
     component: CapabilityEditionModal,
     props: {
          capability: this.capabilities[capabilityKey],
         capabilityKey: capabilityKey,
    },
   trapFocus: true,
   customClass: tainacan-modal
   closeButtonArialLabel: this.$i18n.get('close'),
   events: {},
});