Image for post
Image for post
Photo by Dima Pechurin on Unsplash

An Introduction to Vue Teleport — A New Feature in Vue3

Image for post
Image for post

Purpose of the Teleport

How Vue Teleport works

<body>
<div id="app"></div>
<div id='portal-target'></div>
</body>
<template>
<div class='portals'>
<button @click='showNotification'> Trigger Notification! </button>
<teleport to='#portal-target'>
<div class='notification'>
This is rendering outside of this child component!
</div>
</teleport>
</div>
</template>

<script>
import { ref } from 'vue'
export default {
setup () {
const isOpen = ref(false)

var closePopup

const showNotification = () => {
isOpen.value = true

clearTimeout(closePopup)

closePopup = setTimeout(() => {
isOpen.value = false
}, 2000)
}

return {
isOpen,
showNotification
}
}
}
</script>

<style scoped>
.notification {
font-family: myriad-pro, sans-serif;
position: fixed;
bottom: 20px;
left: 20px;
width: 300px;
padding: 30px;
background-color: #fff;
}
</style>
Image for post
Image for post
Image for post
Image for post

Conclusion

I run a VueJS community over at https://learnvue.co, develop web sites, and post whatever I find cool on the Internet.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store