Vue: Insert template in different element (component)

Created on 16 Mar 2016 · 11Comments · Source: vuejs/vue

Hi. I would like to insert the template of a component in a different element but maintain the components tree structure. To be more precise, I have a component (bootstrap modal) which is rendered in the middle of the html content. Now the problem is that the styles of the modal inherits from parent, so what I want to archive is to have my component right there but the template to be inserted just before body end tag

I have tried to put a basic example here and I can't get it working: https://jsfiddle.net/fkm1qtb1/2/ . As you can see, the text is red because the parent element has that color which applies on children too. So I want the template to be inserted on a custom element that is not affected by the color (on this example)

Is this possible, I'm doing something wrong ?

Thanks.

Source

geodeveloper

Most helpful comment

You can do this:

mounted: function() { document.body.appendChild(this.$el); }

The component html is moved as expected, at least for me it worked hahah.

renanfenrich on 19 Jan 2017

👍14 ❤3 🎉1

All 11 comments

What you seem to be trying to achieve may be to use slots to distribute the content. http://vuejs.org/examples/modal.html

Through your reproduction you can inspect the result and see that the content is actually being passed to the components body.

blake-newman on 17 Mar 2016

@yyx990803

On a side note, perhaps a feature implementation for vm.$slots could be useful to aid in content distribution via JavaScript. Similar to vm.$refs.

Reasons for this could be to provide a single modal component instance to the DOM. This way we could dispatch events with content or use Vuex to manage state for the component and its content distribution.

This will help prevent cases of two way binding and possible code duplication.

If you agree I'll open a separate issue for the feature, for discussion.

blake-newman on 17 Mar 2016

@blake-newman it's on the roadmap: https://github.com/vuejs/vue/issues/1726

yyx990803 on 17 Mar 2016

@yyx990803 So it is didn't see the issue.

blake-newman on 17 Mar 2016

@blake-newman thanks for your answer. Actually I want the content to be distributed outside of the component. For example:

<body id="app"> <!-- Vue Instance -->
    <component-parent>
        <component-child>
            <component-child-modal></component-child-modal>
        </component-child>
   </component-parent>
<div id="modal-content"></div>
</body>

So, what I want is that component-child-modal template to be inserted/mounted into modal-content div. And as you can see component-child-modal it's on 3th level. Is that possible ?

@yyx990803 could I get your attention too ?

Thank you!

geodeveloper on 17 Mar 2016

https://github.com/rhyzx/vue-transfer-dom

vuchl on 17 Mar 2016

thanks @vuchl . Looks like is what I'm looking for! I will give it a try.

geodeveloper on 17 Mar 2016

@geodeveloper this is not a feature that will be supported in Vue itself, but yeah the 3rd party solution could work.

yyx990803 on 17 Mar 2016

@yyx990803 ok, though it will be nice to have something like that built-in, there are a lot of cases where you need to have the component mounted on different element outside of component.

@vuchl I tried that plugin and works as expected! Thanks again.

geodeveloper on 21 Mar 2016

You can do this:

mounted: function() { document.body.appendChild(this.$el); }

The component html is moved as expected, at least for me it worked hahah.

renanfenrich on 19 Jan 2017

👍14 ❤3 🎉1

I have created a Vue2 v-transfer-dom directive at https://github.com/tmorehouse/vue-transfer-dom