How to use Portals in Vue.js 3
Portal is a feature where we can render a part of the code which is present in one component into a different component in a different DOM tree. There was a third-party plugin called portal-vue that achieved this in Vue 2.
In Vue 3, portal will be built in and it is very easy to use.
Vue 3 will have a special tag called <Teleport>, and any code enclosed within this tag will be ready to be teleported anywhere. The Teleport tag takes a to argument.
Let’s see this in action:
<Teleport to="#modal-layer">
<div class="modal">
hello
</div>
</Teleport>
Any code inside <Portal></Portal> will be displayed in the target location mentioned.
<div id="modal-target"></div>
