Vue.js question detail
What is teleport?
The <Teleport> component allows you to render a part of your component's template into a different location in
the DOM — outside the current component's hierarchy.
Example:
- Wrap teleport component around the modal template inside
app.vuefile
<template>
<h1>Page Content</h1>
<!-- This modal will render in the #modals element -->
<teleport to="#modals">
</teleport>
</template>
- Render modal component inside main
index.htmlfile
<body>
</body>
In Vue 2, this functionality was possible via the community plugin portal-vue
Use cases
- Modals
- Toasts
- Tooltips
- Context menus
- Dropdowns
- Anything that needs to break out of DOM nesting