feat: allow Vue component to receive a VueRouter factory

[Silentscripter]

In some situations (for ex. micro-frontend architectures where vue apps are wrapped in web-components) it would be good to have different VueRouter instances when a wrapped vue app is destroyed and recreated (since normally the VueRouter is created before and referenced in Vue component options).

[posva]

Hi, I don't get why you can't reuse the same router instance

[Silentscripter]

hi posva, in micro-frontend architecture we usually wrap vue apps in web-component to reuse as independent widget in another SPA. As for vue component option design if you happen to destroy and recreate one of these widget (for ex routing from a page to another and back) you find the widget to be in the last route since even if the vue app is destroyed, the reference of the router that will be taken by the new vue app is the same.
Another case is when you use the same widget on the same page more than once: they share the same router unde the hood and whenin you push a route in a widget all will follow.
With this addition you can assure that vue router is created on the vue root instance during the beforeCreate lifecycle and is assured to be linked to that vue app only.

[Silentscripter]

Forgot to mention that Vuex, for example, has taken the same approach in its mixin beforeCreate hook.

[Turaylon]

I need this on my project too, hope it will merged.
As i can see is a feat that does not break anything on current usage, but is a plus for usage in multiple instances of Vue as web components.

[AndreaPaciolla]

Hi there,
any update on this topic?

Could be useful for me too.

[exoego]

@posva
Vuex already has same capability via options.store: it can be function as factory.
https://github.com/vuejs/vuex/blob/caa663d69608fc36d1a88746df28961437d38786/src/mixin.js#L26

@Silentscripter
Could you resolve conflict?

[exoego]

@Silentscripter
Just a kind reminder regarding conflict.

[Silentscripter]

Sorry for the delay, I've been busy these days. Will fix in this week for sure!

[Silentscripter]

conflict resolved

[posva]

The problem with this is that this should not be enough as router instances do not have a way to be destroyed yet (releasing listeners and others). So there is a few more things to check first

[Silentscripter]

I will try to have a look for a solution, thanks for your comment

[posva]

Hello I'm coming back to this since a different PR that should help micro frontends was merged and released recently #3172

The corresponding API added to Vuex was to delay the store instantiation (vuejs/vuex#798)

I'm still confused by why you need a function here. Don't you instantiate the root component again?

function createVueApp() {
  // cleanup existing #app element
  const router = new Router()
  new Vue({ router, el: '#app' })
}

[posva]

Closing due to inactivity. Please open a new issue with a reference to this one if you can follow up with more information.