Introduction

Vue Portals, also known as teleporting, allow you to render content outside of a component's local DOM and into another part of the document. This is useful for scenarios where you want to render elements in a different part of the HTML document, such as modals or tooltips. In this guide, we'll explore how to use Vue Portals to teleport elements and provide sample code to demonstrate the process.

Sample Code

Let's create a Vue.js application with a portal to teleport elements into a different part of the document:

<div id="app">
  <button @click="toggleModal">Open Modal</button>
  <portal to="modal">
    <div v-if="showModal" class="modal">
      <button @click="toggleModal">Close</button>
      <h2>Modal Content</h2>
    </div>
  </portal>
const app = new Vue({
  el: '#app',
  data: {
    showModal: false
  },
  methods: {
    toggleModal() {
      this.showModal = !this.showModal;
    }
  }
});
            

In this code:

• We create a Vue component that includes a button to toggle the display of a modal.
• We use the `portal` component to define a portal with the `to` attribute set to "modal." This will teleport its content into the modal element.
• The modal is conditionally rendered based on the `showModal` data property. When the button is clicked, it toggles the `showModal` property, showing or hiding the modal content.
• The modal content, including a close button and a title, is teleported into a different part of the HTML document when it's shown.