Teleport

However, sometimes a part of a component’s template belongs into this component logically, while from a technical point of view, it would be preferable to move this part of the template somewhere else in the DOM, outside of Vue app. For example, due to styling requirements, we want to move from it’s deeply nested position to the <div> with id="endofbody"

To do so, we can use Vue’s built-in <teleport> component:

See the Pen Teleport by Vue () on CodePen.

As you can see, all of the children of will be appended to <div id="endofbody">.

In this case, even when child-component is rendered in the different place, it will remain a child of and will receive a name prop from it.

This also means that injections from a parent component work as expected, and that the child component will be nested below the parent component in the Vue Devtools, instead of being placed where the actual content moved to.

Using multiple teleports on the same target

You can check <teleport> component options in the API reference