Teleport's target (prop to) should be optional
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>
<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>