n How to use Teleport in Vue.js 3 | CodimTh

Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh

One of the new features of Vue3 that has been talked about for a while is the idea of Portals – or ways to move template HTML to different parts of the DOM. Portals, which are a common feature in React, were available in Vue2 under the portal-vue library. 

Now in Vue3, there is native support for this concept using the Teleport feature. 


How Vue Teleport works

Let’s say that we have some child component where we want to trigger a notification to pop up. As we were just discussing, it’s simpler if we render this notification in an entirely separate DOM tree than Vue’s root #app element. 

The first thing we would want to do is go to our index.html and add a <div> right before </body>.

   <div id="app"></div>
   <div id='portal-target'></div>

Next, let’s start creating our component that triggers the notification to render. If you’re not familiar with Vue3, definitely check out this Vue3 introduction!

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

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

    var closePopup

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


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

    return {

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

In this snippet, when the button is pressed, a notification will be rendered for 2 seconds. However, our main goal is to use Teleport to get the notification to render outside our Vue app. 

As you can see, Teleport has one required attribute – to

The to attribute takes in a valid DOM query string and it can be the:

  • id of an element
  • class of an element
  • data selector
  • a responsive query string

Since we passed it in #portal-target, our Vue app will locate the #portal-target div we included in index.html and it will teleport all the code inside the portal and render it inside that div.


Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts


Page Facebook