Portal implementation in Vue.

[segfaultmedaddy]

Hello there! Sorry, if it's wrong place to post such a thing. It's more like a question, but may be as feature request as well. What is the current official way of creating portal component? Portal is a component that helps mount the child component to targeted DOM point. For example, React exposes official API for doing portals (i.e. React.unstable_renderSubtreeIntoContainer).

[segfaultmedaddy]

Ping @yyx990803

[posva]

React exposes official API for doing portals (i.e. React.unstable_renderSubtreeIntoContainer)

That's not what I call an official API 😛
There's no official way of doing it right now. That's why there's a feature request label.
You don't need to worry, we'll come back to discuss this as soon as we can, so please don't ping people like that, it spams all contributors for nothing, thanks 🙂

[segfaultmedaddy]

Ok, sorry for that! :)

[fnlctrl]

For now, it can be implemented with render functions, by passing the rendered VNodes to another component.
Here is a basic example: https://jsfiddle.net/fnlCtrl/dn2qa2fg/

I've been using something like the above in production for some time, and it seems to work well.

[LinusBorg]

FYI, I'm currently playing with this idea as well, and on a bigger scale, with a target anywhere in the DOM (using an event bus - one of the few situations where i found it useful). You can see my progress here:

https://github.com/LinusBorg/vue-portal/tree/develop

As far as I have tested it, it works pretty well, but I don't think I have catched all edge cases and I'm not sure that this works in all cases.

It works like this:

<!-- From.. -->
<portal to="destination">
  <ul class="todo-list">
    <li v-for="(todo, index) in todos">
      {{todo}} (<a href="#" @click.prevent="remove(index)">x</a>)
    </li>
  </ul>
</portal>


<!-- ..to_ -->
<portal-target name="destination"/>

So far, this only works with the <portal-target> component, but I'm playing with the idea of a kind of forceMount prop that will make the <portal> create a target component anywhere (which would be mostly useful to do outside of the DOM that is managed by Vue, so more useful for Apps that use Vue to enhance parts of their page)

[segfaultmedaddy]

Yes, I'm talking mostly about the last paragraph of your article. I've only found the way where I can use vm.$mount('DOM_ENDTRY_POINT') inside of Portal component by using event bus approach as well.

[edgardleal]

I don't know if I understand your question, but dynamic component should resolve your problem ?
Dynamic-Components

<component v-bind:is="currentView"> <!-- component changes when vm.currentView changes! --> </component>

[LinusBorg]

No, dynamic components do not do what OP wants.

[yyx990803]

Closing this as I believe it's possible to implement Portals in Vue 2.x in userland with current feature set. If anyone is interested in it, keep an eye on @LinusBorg 's repo!

[LinusBorg]

I hope to release the first version in a week or two.

[LinusBorg]

Done. See here: https://linusborg.github.io/portal-vue

[Justineo]

Is there any chance that we support portal natively in Vue? Although portal-vue is working nicely in most cases, it still have side effects like leaving an empty wrapper element thus may interfere with something (especially in styles) relying on DOM structure like .a + .b { margin-top: 1em } or .a:last-child { margin-bottom: 1em }. If the <portal> and <portal-target> can just work as abstract components it would be great. IMO we cannot eliminate the empty wrapper but still get everything right unless the feature is supported by Vue's core (hacking render functions to return an inner VNode may still cause problems).

[LinusBorg]

Maybe start with a feature request for portal-vue, I'm quite open to those :)

We don't have portals in the roadmap for Vue at the moment.