5

Understanding Portal in Vue.js

 1 year ago
source link: https://www.telerik.com/blogs/understanding-portal-vuejs
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Understanding Portal in Vue.js

vuet3-dark-1200x303.png?sfvrsn=58674b55_3

Learn what PortalVue is, why you should use it and how to render components outside our Vue app using PortalVue.

PortalVue, sometimes known as Teleport, is a new addition to Vue 3 and a simple component that allows you to render components anywhere in the DOM and outside your Vue app. Aside from that, we can also use it mainly on dropdowns, modals and popup messages.

The PortalVue component is critical in your Vue application because it allows you to move elements that are not within your app but are controlled by the Vue App. This article will explain what PortalVue is, why you should use it and how to render components outside your Vue app using Portal-Vue.

Table of Contents

  1. Introduction to PortalVue
  2. Installation and setup
  3. Why you should use PortalVue
  4. How to render components with PortalVue
  5. Conclusion

Prerequisites

This article assumes you have a basic knowledge of working with Vue.js from setup to installation of components, as this tutorial will not cover all this in detail.

Introduction to PortalVue

PortalVue is a set of Vue components that allows you to render a component anywhere in the DOM or outside of the elements that are not within your app but are controlled by the Vue App.

Installation

Since PortalVue is a component, we will have to install it and set it up.

To install the Portal package, run the command below:

npm install -–save portal-vue
# or with yarn
yarn add portal-vue

Setup

After installation, the next step is to set up our package. To do that, we will copy the syntax below and paste it into our main.js file :

import PortalVue from 'portal-vue'
Vue.use(PortalVue)

Why You Should Use PortalVue

When working with large components, we have to organize all the components logically. PortalVue is ideal because it simplifies working with elements like modals and popups and makes it extremely easy to render it on top of their DOM elements without ugly workarounds.

How To Render Components with PortalVue

PortalVue is a component that we use in rendering components—let’s get started. In this example, we will create a table list which contains an employee’s profile using Progress Kendo UI for Vue.

Create Employee Table List

First, we will create a component called EmployeePage, and copy this code into that component:

<template>
  <div class="content">
    <h1>Employee Profile</h1>
      <table border="1" class="k-table k-table-layout-fixed">
        <thead class="k-table-thead">
          <tr class="k-table-row">
            <th class="k-table-th">Name</th>
            <th class="k-table-th">Title</th>
            <th class="k-table-th">Company</th>
            <th class="k-table-th">Identity</th>
          </tr>
        </thead>
        <tbody class="k-table-tbody">
          <tr class="k-table-row" v-for="(employee, id) in employees">
            <td class="k-table-td">{{ employee.name }}</td>
            <td class="k-table-td">{{ employee.title }}</td>
            <td class="k-table-td">{{ employee.company }}</td>
            <td class="k-table-td">{{ id }}</td>
          </tr>
        </tbody>
      </table>
  </div>
</template>

<script>
export default {
  name: "EmployeePage",
  data() {
    return {
      employees: [
        { name: "Jacob Mathew", title: "Senior Designer", company: "Google" },
        { name: "Andy Jane", title: "Marketing Manager", company: "Apple INC" },
        { name: "Michael Smith", title: "Web Instructor", company: "Vue School" },
      ],
    };
  },
};
</script>

Rendering Component Outside our Vue App

In the previous section, we created our employee page. Now, let’s see how we can render our component outside our Vue app.

We have created our EmployeePage component. Next, we will create a second component called EmployeeData. This is where our employee data will be displayed using the portal element.

API Factories for Vue.js & Nuxt

How are you organizing your API calls? Have you considered API factories to make your codebase easier to work with, increasing your team’s productivity?

The next step is to connect the two components we created in our App.vue component.

<script>
import EmployeePage from "./components/EmployeePage.vue";
import EmployeeData from "./components/EmployeeData.vue";
export default {
  name: "App",
  components: {
    EmployeePage,
    EmployeeData

  },
};
</script>

Next, we will add the portal component portal to="employee-data" in our EmployeePage. This will render the content anywhere we have the employee-data in the portal element.

<template>
  <div class="content">
    <h1>Employee Profile</h1>

    <portal to="employee-data">
      <table border="1" class="k-table k-table-layout-fixed">
        <thead class="k-table-thead">
          <tr class="k-table-row">
            <th class="k-table-th">Name</th>
            <th class="k-table-th">Title</th>
            <th class="k-table-th">Company</th>
            <th class="k-table-th">Identity</th>
          </tr>
        </thead>

        <tbody class="k-table-tbody">
          <tr class="k-table-row" v-for="(employee, id) in employees">
            <td class="k-table-td">{{ employee.name }}</td>
            <td class="k-table-td">{{ employee.title }}</td>
            <td class="k-table-td">{{ employee.company }}</td>
            <td class="k-table-td">{{ id }}</td>
          </tr>
        </tbody>
      </table>
    </portal>
  </div>
</template>

In other words, for us to display the data wrapped with the portal component, we will specify the destination we want the data to be displayed using the portal-target name="employee-data" syntax.

<template>
  <div class="employee-data">
    <h3>Table data of employees and their company</h3>
    <portal-target name="employee-data" />
    <!-- specify the destination here -->
  </div>
</template>

This will render the component and display the data in our browser. Example of what our application will look like:

portal-employee-list

One unique thing about the portal component is that you can reuse that component anywhere in your code so far. You create and target the destination you want to display that content in. This case can also include buttons, modals, popup notifications and the rest.

Conclusion

Portal is a perfect package to work with if you want to render components outside your Vue apps, create reusable components and more. This article shows how we can render a component outside our Vue app using the Vue 3 feature portal. Hopefully, after this article, you will be able to create the reusable component easily.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK