Teleport does not work for elements controlled by vue itself

[Fuzzyma]

What problem does this feature solve?

Oftentimes I find myself writing components that semantically belong where they are but need to be displayed somewhere else in my app. Teleport is there to solve the problem - but you can only port outside of the app. Whenever I target an element which is rendered by vue itself it echos a warning that the element needs to be mounted first. Unfortunately, not every usecase can be rewritten in a way, that it falls into the simply modal-button category.

I opened a stackoverflow issue with a reproduction: https://stackoverflow.com/questions/63652288/does-vue-3-teleport-only-works-to-port-outside-vue

What does the proposed API look like?

Either have a teleport target component as in portal-vue or allow targeting ids of other components

[HcySunYang]

I think the following approach should work correctly:

createApp({
  setup() {
    const refDom = ref(null)

    return () => [
      // ref the DOM
      h('div', { ref: refDom }),
      h(Teleport, {
        // set the target to refDom
        to: refDom.value,
        // disable teleport when refDom is not set
        disabled: !refDom.value
      }, h('h1', 'hcy'))
    ]
  }
}).mount('#app')

But that will still get warning messages:

[Vue warn]: Invalid Teleport target: null
[Vue warn]: Invalid Teleport target on mount: null (object)

Maybe we need to improve it.

[Fuzzyma]

Interesting approach. But it becomes more complicated when you dont have access to the dom ref because the target is in some different component. How would you go about that?

[unbyte]

works well

  const useTele = () => {
    const target = ref(null)
    return () => target
  }

  const useThisTele = useTele()

  createApp({
    setup() {
      return { target: useThisTele() }
    },
    template: `
      <div>
      <h1>App</h1>
      <div id="dest" :ref="d => target = d"></div>
      <parent-comp/>
      </div>`
  }).component('parent-comp', {
    template: `
  <div>
    <child-comp/>
  </div>`
  }).component('child-comp', {
    setup() {
      return { target: useThisTele() }
    },
    template: `
      <div>
      <Teleport :to="target" :disabled="!target">
        Hello From Portal
      </Teleport>
      </div>`
  }).mount('#app')

[LinusBorg]

That still a bit fragile, however.

When the target's parent gets removed from the DOM, the portal content is removed from the DOM with it - but the source component won't be informed about this and consequently, in it's vdom, it assumes that the elements still are in the DOM. That will likely result in update errors when the source component does update later.

[Fuzzyma]

@unbyte so you basically pass (or import) useThisRef to the components which define it and which uses it as target. Is that correct? (so in easy terms you pass around a reference)

[bjarkihall]

@LinusBorg , this discussion might help, where the terminology "reparenting" is used:

Generally the discussion (incl. linked gists+rfc) revolves around the use of keys/instances to map components to their destinations but two libraries also stick out there lately:

1. react-reverse-portal, which uses wrapping portals to move components around the VDOM.
2. react-reparenting, which uses the underlying fiber API in react to move a fiber to a new place in the VDOM.
   Both make it possible to move components around without remount/rerender.

• Do you see any benefits Vue3's Teleport has over React's Portals in this area or do they have the same functionality when it comes to this?
• Has vue considered "global" key props - similar to the typical "key" prop sibling-components receive when iterating over an array?
• Do we have the API to safely move a VDOM block (component and its descendants) around, to aid the runtime?

Has any similar discussion taken place in vue or its rfcs or is there even a vue lib that solves this problem already?

[mayuxian]

@unbyte
<teleport to='#elementId'> don`t work
#3142 (comment)

Should this problem should be fixed?

[kaizenseed]

Is there an accepted best practices approach to this issue that's different from the solution provided in https://stackoverflow.com/a/63665828/1764728?

[Fuzzyma]

@kadiryazici the example @unbyte provided is a good solution. It maybe looks a bit complicated but it boils down to:

• create a reference somewhere and fill it with the dom node via ref="someVar"
• use that reference as target in teleport

  <teleport :to="someVar" v-if="someVar">

With the v-if you make sure, that the teleport renders only when someVar is filled (say: the target was mounted by vue).

[patforg]

I've bundled @Fuzzyma solution in to a component:

TeleportWrapper.vue

<template>
    <teleport :to="target" :disabled="!target || disabled">
      <slot></slot>
    </teleport>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    to: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup () {
    const target = ref(null)
    return {
      target
    }
  },
  mounted () {
    const el = document.querySelector(this.to)
    if (el) {
      this.target = el
    }
  }
}
</script>

Then you can use it like this:

<teleport-wrapper to="#some-id">
   my content here
</teleport-wrapper>

// somewhere else in your page
<div id="some-id"><!-- content will appear here --></div>

[Obapelumi]

@patforg super useful thanks!