Vue style teleport in Alpine

[thetutlage]

I have been enjoying Alpine lately with my server rendered (traditional style) setup. I recently stumbled upon Vue teleport API when working on some modal designs.

The concept of Teleport (as per my understanding) is that a piece of HTML remains the logical children of a component, however, the contents is at a different place altogether within the DOM.

For example:

<button @click="modalOpen = true">
  Open full screen modal! (With teleport!)
</button>

<teleport to="body">
  <div show-if="modalOpen" class="modal">
    <div>
      I'm a teleported modal! 
    </div>
  </div>
</teleport>

In the above example, the contents inside the teleport element will be appended to the body right away and then mutating the state within the component will impact the div which is next to the body element.

I know that alpine doesn't have any concept of custom elements. But still, I want to bounce this idea and see what other thinks

[KevinBatdorf]

I think the "Alpine way" would be split it into separate components, then to trigger an event in one component (the button) and listen for it on the other (your teleport). Sending commands as the state changes.

<button @click="$dispatch('open-modal')">
  Open full screen modal! (with events)
</button>

<div x-data="{ modalOpen: false }" show-if="modalOpen" @open-modal="modalOpen = true">
  <div>
    I'm an event controlled modal! 
  </div>
</div>

I tend to do something like <div x-data="{ content: '' }" x-show="content.length"> for modals, then you can add content to the payload that you want the modal to show, like <button @click="$dispatch('open-modal', {content: 'You cant take the sky from me.'})">

Teleports feel like side effects to me, which I try to minimize. That's just my take on it though!

If you don't want to use events, you could use the $component magic helper to sync with other components. It would work similarly to teleport but still have a functional/declarative feel.

https://github.com/alpine-collective/alpine-magic-helpers#component

<button @click="$component('modal').modalOpen = true">
  Open full screen modal! (with $component)
</button>

<div x-data="{ modalOpen: false }" show-if="modalOpen" x-id="modal">
  <div>
    I'm a $component modal! 
  </div>
</div>