Livewire Teleport: Render Anywhere in DOM

Use Livewire teleport to render components anywhere in the DOM tree.

Teleport content anywhere:

Basic Teleport

blade

@teleport('body')
    <div class="modal">
        Modal content
    </div>
@endteleport

blade

@teleport('#modals')
    <x-modal />
@endteleport

blade

@teleport('body')
    <div class="fixed bottom-4 right-4">
        {{ $notification }}
    </div>
@endteleport

Perfect for modals and overlays!

Use Livewire teleport to render components anywhere in the DOM tree.

Teleport content anywhere:

blade

@teleport('body')
    <div class="modal">
        Modal content
    </div>
@endteleport

blade

@teleport('#modals')
    <x-modal />
@endteleport

blade

@teleport('body')
    <div class="fixed bottom-4 right-4">
        {{ $notification }}
    </div>
@endteleport

Perfect for modals and overlays!