Subscribe on changes!

Teleport's target (prop to) should be optional

avatar
Jul 19th 2021

What's the problem?

Teleport's target (prop to) should be optional.

Why it's a problem?

We are actually often forced to duplicate large portion of template because of teleport's behavior:

<div class="app">
  <div id="topbar"></div>

  <main>
     <div v-if="!mobile">
        .. large portion of template / components ... 
      </div>

     <teleport v-if="mobile" to="#topbar">
         <div class="fixed w-full">
           ... exact same large portion of template
         </div>
     </teleport>
  </main>
</div>

What's the proposed solution / API?

When the to prop is null or not provided, teleport should act as a normal div (or any tag provided by the tag prop) and inject it's content in place

<teleport :to="mobile?'#topbar':null" tag="div" :class="[mobile?'fixed w-full':'relative']">
  ... large portion of template ...
  ... no need to be duplicated anymore ...
</teleport>
avatar
Jul 19th 2021
<div class="app">
  <div id="topbar"></div>

  <main>
     <teleport :disabled="!mobile" to="#topbar">
         <div class="fixed w-full">
           ... exact same large portion of template
         </div>
     </teleport>
  </main>
</div>

https://v3.vuejs.org/api/built-in-components.html#teleport