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
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.