portal-vue

[joaopedrodcf]

portal-vue

Portal-vue is a package that was created to add portals to vue ( useful for dialogs,modals etc ) this package was created when vue 2 didn't support portals (which in vue are called teleport)

The last update was 3 years ago and even if they also support vue 3 the best option is to just migrate to the native implementation which is teleport.

https://www.npmjs.com/package/portal-vue

---

description: vue 3 already supports teleport natively (portal-vue) making the extra dependency unnecessary

App.vue

<template>
  <div>
    <h1>Nuxt App</h1>

    <portal to="teleport-target">
      <p>This is portal</p>
    </portal>
  </div>
</template>

<div id="portal-target">
  <!-- Portal content will render here -->
</div>

Replacements for portal-vue

vue native teleport API

Example:

App.vue

<template>
  <div>
    <h1>Nuxt App</h1>

    <teleport to="#teleport-target">
      <p>This is teleported</p>
    </teleport>
  </div>
</template>

Somewhere in the app

    <div id="teleport-target">
      <!-- Teleported content goes here -->
    </div>

[43081j]

makes sense to me 👍

it'd be helpful for migration docs to have an example of before/after (i.e. a portal-vue example converted to use the native temporals stuff). as we will need to document this when we add it to the manifests

[joaopedrodcf]

Yeah will add it but was on my phone was a bit tricker to comment hehe

[Fuzzyma]

It's called Teleport, not temporals :)

[joaopedrodcf]

Ups yeah you are completely right fixed the typos and added an example

[joaopedrodcf]

Regarding this I created the PR and while testing there are actually differences between both APIs which I left a message in the description:

Since Vue 3 the [Teleport]('https://vuejs.org/guide/built-ins/teleport.html') it replaces portal-vue for most use cases, especially modals and overlays.
<Teleport> only moves DOM nodes to an existing target — it does not manage destinations, layouts, or component structure.

Teleport should cover most of the common cases where we want to render modals, overlays outside but for cases where we want component X to have component going to component Y it will not work, dunno what we do in those cases.

When I created the issue was convinced that all uses cases could be replaced

[Fuzzyma]

You can port component A to B by using a shared ref afaik.
You can also just use an ID in component A and port to it in component B.

Do you have an example how a non-working example would look like?