Conditionally teleport?

[erichhaemmerle]

I have a form on my page that is contained in a left sidebar, but based on the current value of an x-data variable, I would like to teleport the form to a different spot on the page outside of the sidebar. Is this possible? Essentially this form is in a left sidebar on desktop, but on mobile the form is initially hidden in a completely different spot than the left sidebar and slides up from the bottom of the page depending on a button click that changes an Alpine data value. Currently my solution was to have two different forms on the same page and hide and show each one depending on the value. It would be nice to only need to have the form in the code in one spot and just teleport it accordingly. I can get the form to successfully teleport to each respective spot on the page if I hard code the ID of the div in x-teleport, it's just that the x-teleport value needs to change depending on an x-data value. Not sure if this is possible.

THANKS

[braedencrankd]

I'm also keen to figure this out. Can just duplicate code, but ideally teleporting conditionally would be a sweet feature.

[jgauna]

Here's my scenario. I needed to show a component called "map" in a section when mobile and the same map component in another section when it's desktop. I thought "well, let's use dynamic teleport" but I faced reality :( Here's how I solved it without duplicate code

<!-- [some prev html] -->
<div class="md:shrink-1 flex-1 overflow-hidden bg-slate-50 text-white md:flex md:w-2/5 md:flex-col">
  <!-- MAP (MOBILE VERSION) -->
  <div id="mapMobile" ax-load="event" x-data="mapModule()" x-html="view" class="contents" x-ignore></div>
</div>
<!-- [some prev html] -->
<div class="hidden overflow-hidden bg-slate-50 text-4xl text-white md:flex-col lg:flex lg:w-2/5 lg:shrink-0">
  <div class="grid h-full grid-flow-row auto-rows-max grid-rows-6">
    <!-- MAP (DESKTOP VERSION) -->
    <div class="row-span-3 bg-purple-400">
      <div id="mapDesktop" ax-load="event" x-data="mapModule()" x-html="view" class="contents" x-ignore></div>
    </div>
    <!-- ADMIN SECTION -->
    <div class="row-span-3 bg-purple-900">09</div>
  </div>
</div>
<!-- [some more html] -->

As you see the component is the same (no duplicated code for the map) but they load with different events according to the viewport. Async-Alpine is awesome! If anyone needs help with this, I will be glad to help :) Dynamic teleport would be fantastic in my opinion, though.