Is it possible to implement PortalVue in multiple Vue.js single file components?

While working on Vue.js (single file components), I have discovered three methods of passing data around: local state/props, store, and utilizing PortalVue. Through my experiments with PortalVue, I successfully implemented both portal and portal-target within the same .vue file. However, attempts to use portal and portal-target across two separate .vue files were unsuccessful.

The PortalVue documentation explains that "PortalVue is a set of two components that allow you to render a component's template (or a part of it) anywhere in the document - even outside the part controlled by your Vue App!"

Does this mean PortalVue only functions when both portal components are in the same file?

It works within one component

Example in ComponentA.vue:

<portal to="destination">
  <p>Send this to destination</p>
</portal>

<portal-target name="destination"gt;
</portal-target>

However, the following does not render

Example in ComponentB.vue:

<portal to="destination">
  <p>Send this to destination</p>
</portal>

<portal-target name="destination">
</portal-target>
javascriptvue.jsvue-component

Answer №1

When utilizing portals, it is important to note that they are only visible when the components associated with them are rendered simultaneously on the page. This means that both components have to be present for the portal to be displayed properly.

Vue.component('foo', {
template: '#foo',  
});

Vue.component('bar', {
template: '#bar',  
});

new Vue({
  el: "#app",
});
.wrapper {
  border: 1px solid black;
  margin: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0676697472676a2b707363463728332837">[email protected]</a>/dist/portal-vue.min.js"></script>
<div id="app">
  <foo></foo>
  <bar></bar>
</div>

<template id="foo">
  <div class="wrapper">
    Foo
    <portal to="destination">This is from foo</portal>
  </div>
</template>

<template id="bar">
  <div class="wrapper">
    Bar
    <portal-target name="destination"></portal-target>
  </div>
</template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Finding the following index value of an object within a foreach loop

In my code, I have an object called rates.rates: { AUD="1.4553", BGN="1.9558", BRL="3.5256"} And I am using the following $.each loop: $.each( rates.rates, function( index, value ){ console.log(index); }); I have been attempting to also log the n ...

javascriptjqueryobjectforeach

Preventing selection of past dates with Material UI in ReactJS

I'm currently working on a date range picker using react material ui. The goal is to allow users to select a specific date and then disable all past dates from that selected date onward. How can I go about implementing this functionality in react mate ...

javascripthtmlreactjsmaterial-ui

Attempting to showcase information on the Angular frontend

When attempting to retrieve the Street name, I am seeing [object Object]. What is the optimal approach for displaying JSON data on the client side? I managed to display a street name but struggled with other components. How can I access the other elements ...

javascriptjsonangulartypescriptinterface

Enhance D3 Version 6 Stacked Bar Chart with Spacing and Interactive Features

My bar chart lacks the spacing between bars that I intended to achieve, and the interactive tooltip doesn't show up when hovering over the bars. I could use some assistance with this. The purpose is to display the value of a specific color when hoveri ...

javascripthtmlcssd3.js

Virtual machines have encountered issues when attempting to utilize setTimeout within the browser with vm.runInNewContext

When running a JS script using the vm module in a browser, the following details are included: vm.runInNewContext(codeToEval, sandboxObject); Although interval methods like setTimeout and setInterval do not work, even when exposed in the sandboxObject cr ...

javascriptnode.jsgoogle-chromev8node-vm2

Ways to determine if the property of a document has been altered?

Currently, I am in the process of writing tests for an Express CRUD application. The specific route I am focused on is the account recovery route. This route accepts POST requests with an email included in the body. Essentially, the application will search ...

javascriptnode.jsmongodbexpressjestjs

Nuxt.js encounters difficulties in fetching information from the Django Rest Framework API

I am currently developing a Nuxt.js/Vue frontend for my Django Rest Framework backend. Despite specifying permissions to allow non-authenticated users to read-only, I am having trouble successfully loading data from my API. Index.vue import axios from &a ...

vue.jsdjango-rest-frameworknuxt.js

What's better in React: using pure components or non-pure components? Is it okay to fetch data in componentDidMount or

Exploring React in Meteor has led me to observe two distinct approaches... Take the meteor leaderboard example, where a list of players displays their names and scores. The pure approach involves fetching all players and passing them into the playersList ...

javascriptmeteorreactjs

Design a clickable div element embedded within an interactive article using HTML5

Currently, I am facing an issue with placing clickable div elements inside an article tag in HTML5. The problem is that when I try to click the divs, it registers as a click on the article itself. Below is an example of my code: HTML: <article id=&apo ...

javascriptcsshtml

Encountering difficulties in updating CSS styles using the useState hook in React

I am currently working on creating a modal in react that changes the background color when opened. The goal is to have the background color darken when the modal is activated and return to normal when the modal is closed. I attempted to achieve this using ...

javascriptnode.jsreactjsreact-state

The Chronicles of Vue 3

I have successfully set up Storybook for Vue, but I am facing some issues with how it handles Vue 3 components. I suspect the problem lies in the versions - my Vue version is @vue/cli 4.5.11 (checked with "vue -V") and the Storybook version is 6.1.17 (che ...

vue.jsstorybook

Step-by-step guide on displaying SVG text on a DOM element using Angular 8

I have a FusionChart graph that I need to extract the image from and display it on the same HTML page when the user clicks on the "Get SVG String" button. I am able to retrieve the SVG text using this.chart.getSVGString() method, but I'm unsure of ho ...

javascriptangularfusioncharts

Adjusting or cropping strokes in a JavaScript canvas

I am working with a transparent canvas size 200x200. The object is being drawn line by line on this canvas using the solid stroke method (lineTo()). I'm in need of making this object full-width either before or after ctx.stroke();. ...

javascripthtmlcanvas

Tips for updating the pagination layout in Material UI Table

Currently, I am attempting to modify the background color of the list that displays the number of rows in MUI TablePagination. <TablePagination style={{ color: "#b5b8c4", fontSize: "14px" }} classes={{selectIcon: ...

javascriptreactjsreact-nativematerial-ui

Tips for developing a module for node configuration that exclusively exports JSON data

I have a query about creating a node module that specifically exposes JSON files for configuration purposes. While I know I can easily export a JSON object from index.js, I'm exploring better alternatives to expose JSON files from the node module and ...

javascriptnode.jsnpmwebpack

Data assigned to KendoUI chart must have keys that do not consist of numbers

When I input the following simple data into a KendoUI chart, the chart displays the data correctly. var data = [ {"state":"NY","abc":12312}, {"state":"AZ","abc":12312}, {"state":"CA","abc":12312}, ...

javascriptjsonkendo-ui

Incorporate classes into span elements with Vue 3 on click event

In order to add a class to the element when clicked, you can use the span element as a checkbox. However, there seems to be an issue with selecting multiple elements at once <div v-for="(item, index) in listTimes"> <span class="ch ...

vue.jsvuejs3

Customize Tab indicator styling in Material-UI

Currently, I am attempting to customize the MUI tab by changing the indicator from a line to a background color. Through my research, I discovered that using TabIndicatorProps and setting a style of display:none eliminates the indicator completely. However ...

javascriptcssreactjsmaterial-uifrontend

The interface vanishes upon the integration of TinyMCE into the module

Currently, I am working on a project using Angular-fullstack and attempting to integrate ui-TinyMCE. However, I encountered an issue when I made the following changes: angular.module('academiaUnitateApp') .controller('NewEntryCtrl', ...

javascriptangularjstinymcebower

Activate the Alert (https://material-ui.com/components/alert/#alert) starting from the React component at the bottom of the hierarchy

When it comes to alerts, a normal alert is typically used like alert("message to be displayed");. However, I prefer using material UI Alerts which return a JSX component. For example: <Alert severity="success">This is a success alert — check it out ...

javascriptreactjsmaterial-uialert