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

Share the hyperlink to a webpage with someone else

In my SQL command, I have a unique feature that retrieves the complete URL value of the current page: [##cms.request.rawurl##]. This code returns the entire URL. I need to send this address to another page and load it into a special div called "load-fac". ...

javascriptjqueryhtml

Display the initial x list items without utilizing ngFor in Angular 2

In the template, there are 9 <li> elements, each with a *ngIf condition present. It is possible that 5 or more of them may return true, but the requirement is to only display the first 4 or less if needed. Priority is given to the order of the < ...

javascriptangulartypescript

Exploring the distinctions between Django template variables and JavaScript variables

I am currently trying to populate a table in a Django template. The challenge I am facing is comparing cell values between a JavaScript variable and a Django template variable within the same context. Is there a way to perform this comparison without conve ...

javascriptpythondjangodjango-templates

Enhancing React Flow to provide updated selection and hover functionality

After diving into react flow, I found it to be quite user-friendly. However, I've hit a roadblock while attempting to update the styles of a selected node. My current workaround involves using useState to modify the style object for a specific Id. Is ...

javascriptcssreactjstypescript

Use Javascript to create commands and variables specific to the domain or site of a webpage

Currently, I have implemented the code below to fetch the latest tweet. However, I am looking for a way to customize the TWITTERUSERNAME based on the domain where the template is being used. This template is shared across multiple domains. <script type ...

phpjavascriptjquery

Inquiring about how to make the pieces move on the checker boards I created

I'm having trouble getting my SVG pieces to move on the checkerboard. Can someone please help me figure out how to make them move, even if it's not a valid move? I just want to see them in motion! The important thing is that the pieces stay withi ...

javascriptjqueryhtmlcssnode.js

What is the correct way to establish and terminate a MongoDB connection in a Node.js application?

Hey everyone, I have a piece of code at this link (https://github.com/MrRav3n/Angular-Marketplace/blob/master/server.js) and I'm curious if I am properly starting and ending my database connection. Should I connect and end the db connection in every a ...

javascriptnode.jsdatabasemongodbexpress

Convert the data received from jQuery $.parseJSON into HTML code

I am using $.parseJSON to retrieve data from a specific URL. The link I receive contains {"status":"ok", "message":'<form><input type="text" name="" value=""> </form>'} Now, I want to add the "message" part to my content. $. ...

javascriptjqueryjson

Sending data when button is clicked from Google Apps Script to sidebar

I have been attempting to pass a list that includes both the start cell and end cell of the active range. I want to then assign each value from this list to separate input fields. document.getElementById("btn-get-range").addEventListener('click&apo ...

javascripthtmlgoogle-apps-script

Utilizing Docker to dynamically set VueJS environment variables during runtime

I'm currently facing an issue with dockerizing my Vue app for use in a Kubernetes/Rancher environment. My goal is to set environmental variables in Rancher, such as the API base url, but I'm unsure of how to accomplish this. Below is my Dockerf ...

dockervue.jsnginxenvironment-variablesrancher

How can you attach an event handler to an HTML button without disrupting its default behavior?

I am working on enhancing a contact form to include a feature where the submit button becomes disabled for five seconds after it is clicked. This is to prevent accidental repeat submissions from occurring. However, I am facing an issue where disabling the ...

javascriptjquery

The image has been restricted from view due to CORS specifically on Windows operating systems

This Vue component includes a photo block and an "edit" button. <template> <div> <tui-image-editor ref="editor" > </tui-image-editor> <div class=""> <img :src="img&qu ...

vue.jscorstoast-ui-image-editor

Menu only appears with a double click on the label button

Currently, I'm facing an issue where I have to click the label "button" (hamburger menu) twice in order to show the menu for the second time. My belief is that there might be a conflict between CSS and jQuery causing this behavior. The desired funct ...

javascripthtmljquerycss

Utilize the search component multiple times within a single template in Vue.js

I have a regular search input that searches and displays results effectively. Now, I need to duplicate this search input and reuse it within the same component. <input class="search ml-2" type="search" placeholder="Search" v-model="search"> Here is ...

vue.jsvuejs2

Updating items within an array in a MongoDB collection

I am facing a challenge where I have to pass an array of objects along with their IDs from the client-side code using JSON to an API endpoint handled by ExpressJS. My next task is to update existing database records with all the fields from these objects. ...

javascriptarraysnode.jsmongodbexpress

Should I specify each protected route in the middleware file in the matcher for NextJs 14?

Below is the middleware file I've implemented: import { NextResponse } from "next/server"; import { NextRequest } from "next/server"; import { getApiAuth } from "./app/middleware/api/auth"; const validateApi = (req: Requ ...

javascriptnext.jsmiddlewarenextjs-dynamic-routing

Transferring information from the initiator to a pop-up window in Internet Explorer

I am looking to pass the scope and other values to a child window. It currently works as expected in Chrome, but not in Internet Explorer. Is there a workaround for this issue? var templateUrl = "/someviewpage"; var wOptions$ = 'menubar= ...

javascriptangularjspopup

Leverage the power of Sass styles throughout your Vue.js project

Attempting to utilize sass globally in a vue.js app, I followed this method: const { defineConfig } = require('@vue/cli-service') module.exports = { css:{ loaderOptions:{ sass:{ data:`@import "@/sass/t ...

vue.jssassstyles

Using querySelector() to target specific divs by their classes while excluding any other classes

I am attempting to retrieve only the first divs while excluding the second ones: <div class="_5pcr userContentWrapper"> <div class="_5pcr userContentWrapper _4nef"> After researching, I discovered that the querySelector function should be abl ...

javascriptdom

Creating multiple objects using a single object in JavaScript can be achieved by using the concept of object

When presented with the following data structure: { "time_1": 20, "time_2": 10, "time_3": 40, "time_4": 30 } and expecting a result in this format: [ { "key1": "time_1" ...

javascriptarraysjsonobject