How to implement notifications with Vue Teleport

Published in

MobileAction Technology

3 min readJan 1, 2023

When developing web applications, we may want to display a modal or notification on the screen (which I will refer to as a component in the rest of the article).

We want to show the component to always appear at the top and not disrupt the current page structure. We can use open-source libraries for these types of operations, but if we want to show a custom-designed component for our application, the library we use may not meet our needs. In this article, we will look at how to create our own modal and notification without using any library.

To be able to display our component at the top, all the time, we must place it in the DOM outside of our Vue application. In Vue 2, there is no built-in solution for doing this, we solve it by using an external library. For example, one of these libraries is portal-vue. However, with Vue 3, this has changed and it has started supporting this natively with the component called Teleport. React also offers the same solution as the Portals component. Without further ado, let’s see how to do this.

I coded the sample application by creating a Vue 3 project with Vite. You can find the steps for creating it in the Vite documentation.

For the project code, check out GitHub.
To review the example, check out vue-teleport.
For the design of the notification component, check out Figma.

You can review the pages.

I used the sample component design that I prepared on Figma for the notification.

index.html

I updated the index.html file with the following code to beam the components we will create.

<body>
  <div id="app"></div>
  <div id="notification"></div>
  <div id="modal"></div>
  <script type="module" src="/src/main.js"></script>
</body>

Here, we would directly add it to the body element and it would work again. I added a separate div element for the modal and notification because we might want to access and perform additional operations on these elements later.

Notification.vue

I didn’t add the CSS part here because it is a bit long, you can access the full source code on GitHub.

Modal.vue

I used the example for the modal component in the Vue documentation and edited it according to my own application design (check out the full example). Again, I did not include the CSS part here.

Our Notification and Modal components are ready. Now let’s see how to use them.

App.vue

Let’s see how I use it here.

<Teleport to="#notification">
  <Notification
    :show="notification"
    :icon="icon"
    :title="title"
    :message="message"
    @close="showNotification"
  />
</Teleport>

I wrap the notification component with Teleport to teleport it outside of the Vue app and specify the target with ‘to’. The ‘to’ expects a CSS selector from us, so the ‘notification’ id I added to the index.html file earlier will be teleported inner the div element.

You may ask, ‘If we teleport our code to a different location outside of the Vue application, can our component still communicate with our application?’ The answer is yes. As stated in the Vue documentation, our components are still logically connected to our application, they are just visually displayed in a different location.

Conclusion

You can add custom modals and notifications to your application using the Teleport component, which comes with Vue 3, without using an external library.

Check out the sample application.