Multiple targets, one portal

[AndrewGardhouse]

Would it be possible to have the to prop accept an array of portal targets?

<portal :to="['portal-one', 'portal-two']">
  <component></component>
</portal>

<portal-target name="portal-one"></portal-target>
<portal-target name="portal-two"></portal-target>

[tmorehouse]

That would cause the same Vue vNodes to appear in multiple spots in the document, which is a Vue no-no (no duplicate VNodes)

[LinusBorg]

It could work with scoped slots

[tmorehouse]

That would be true.. but you would have to ensure that it only works when the default slot is a function

[LinusBorg]

Correct.

[LinusBorg]

Won't add this in the Vue 2 version, too hacky. Likely better achievable in the Vue 3 version

[mrleblanc101]

Currently we can do it if multiple portal-tagret have the same name, is there an issue with this ? Is it dangerous ?

<portal :to="portal-one">
  <component></component>
</portal>

<portal-target name="portal-one"></portal-target>
<portal-target name="portal-one"></portal-target>

It trigger this warning [portal-vue]: Target portal-one already exists but I've seen a way to disable it using Wormhole.

import { Wormhole } from 'portal-vue';
Wormhole.trackInstances = false;

[BertKooij]

Just like @mrleblanc101 I am wondering whether a single portal to multiple portal-tagets is possible. Currently everything seems to be working fine, but the warning is still being thrown.

In my situation I am using a solution based on https://github.com/altinselimi/kalendar. This is a week view of events. Every event gets a portal-target with the name event-details. In the root component there is a slot available in order to customize what is being displayed within the event.

Since the slot should be the same for every event (and for every target) it is a fine outcome to reuse the portal into multiple targets. Is this something that should be avoided or is this actually a case where it makes sense?

(So basically the opposite of https://portal-vue.linusb.org/guide/getting-started.html#multiple-portals-one-target)

Root:

		<portal to="event-details" class="slotable">
			<div slot-scope="information" class="created-event">
				<slot name="event" :event_information="information">
					<h4 style="margin-bottom: 5px">{{ information.data }}</h4>
					<p>
						{{ information.start_time.substr(11, 5) }} -
						{{ information.end_time.substr(11, 5) }}
					</p>
				</slot>
			</div>
		</portal>

For each event:

<portal-target
			name="event-details"
			:slot-props="information"
			slim
		/>

Since the slot-props are different for each event the rendered DOM is different for each portal.