The built-in Teleport component

When you build modern interfaces with Vue.js, you quickly run into a classic problem: some UI elements have to be displayed outside their natural DOM hierarchy.

Typical cases:

• Modals
• Dialogs
• Popovers
• Drawers
• Full-screen overlays

This is exactly what Vue.js's built-in Teleport component is for:

Teleport renders a component somewhere in the DOM other than where it is declared in the code. It lets you separate a component's logic from the place where it should appear visually.

Teleport's “to” prop takes the CSS selector, or the DOM node, of the element the component should be “teleported” into.