Allow plugins to be registered before Vue is mounted

[pepijnolivier]

Hey, thanks for creating mingle, it is awesome.

I'm just dipping my toes into Vue and Livewire, and have succesfully set up a mingle component on a page. 🙌 I now need to integrate a translations package into the project.

However, this package needs to be registered as a vue plugin, and for that it needs access to the Vue app. Important: The plugin needs to be registered in the app before it is mounted

I found where the Vue app is initialized in the mingle source. It also gets mounted right after.

Currently it doesn't seem possible to hook into this to register the Vue plugin. Could we perhaps expose this part more, so that it can be more customizable ?

Eg current code for the register method is this:

import mingle from '@mingle/mingleVue'
import MyComponent from './MyComponent.js'

mingle('resources/js/MyComponent/index.js', MyComponent)

Maybe we could optionally expose it as follows, when passing an "automount: false" option ? Just spitballing ideas here:

import mingle from '@mingle/mingleVue'
import MyComponent from './MyComponent.js'

const { app, el } = mingle('resources/js/MyComponent/index.js', MyComponent, { autoMount: false }); // set automount false

// register plugins
app.use(i18n)

// mount app
app.mount(el)

---

To make it concrete, these are the instructions of the translations plugin

[pepijnolivier]

By the way, this relates to https://github.com/ijpatricio/mingle/pull/14 However, with my suggestion, we not only return the Vue app, but also some other props (such as the HTML element ID, to be used for mounting "manually")

[ijpatricio]

Hey @pepijnolivier

I would like to have your thoughts on this:

Someone pointed, if we have multiple components of the same king, we can't right now customize plugins, etc. So this is ready to ship, and it allows for all kinds of customisations.

Check: https://github.com/ijpatricio/mingle/issues/23#issuecomment-2280953802

[pepijnolivier]

Hi @ijpatricio, sorry I just saw your comment!

Looks like it already got resolved by now, which is great! I'll pull the latest version and will have a look at the solution in a short while when I return back to the project I'm working on using Mingle :)

Cheers