By utilizing the teleport feature in Vue 3, you can move a component to the body tag with ease:
<template>
<button @click="modalOpen = true">
Open full screen modal! (With teleport!)
</button>
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
I'm a teleported modal!
(My parent is "body")
<button @click="modalOpen = false">
Close
</button>
</div>
</div>
</teleport>
</template>
<script>
export default {
data() {
return {
modalOpen: false
}
}
};
</script>
This setup renders the modal dialogue within the body tag. Is there a way to achieve similar functionality in Vue 2?