LiVue - Server-driven reactivity for Laravel using Vue.js

Basic Usage

The @teleport directive renders content at a different location in the DOM:

<div>
    <button @click="showModal = true">Open Modal</button>

    @teleport('body')
        <div v-if="showModal" class="modal-overlay">
            <div class="modal">
                <h2>Modal Title</h2>
                <p>Modal content...</p>
                <button @click="showModal = false">Close</button>
            </div>
        </div>
    @endteleport
</div>

@script
const showModal = ref(false);
return { showModal };
@endscript

Target Selectors

Any valid CSS selector works as a teleport target:

<!-- Teleport to body -->
@teleport('body')
    ...
@endteleport

<!-- Teleport to element by ID -->
@teleport('#modal-container')
    ...
@endteleport

<!-- Teleport to element by class -->
@teleport('.notifications')
    ...
@endteleport

Common Use Cases

Modals & Dialogs

Avoid z-index issues by rendering modals at the document root.

Toast Notifications

Centralize notifications in a dedicated container.

Tooltips & Popovers

Prevent overflow:hidden from clipping floating elements.

Full-Screen Overlays

Ensure overlays cover the entire viewport.

Benefits

✓ Z-index management - Teleported content avoids stacking issues
✓ CSS isolation - Parent styles (overflow:hidden) don't affect teleported content
✓ Accessibility - Keep modals at document root for screen readers
✓ Reactivity preserved - Full access to component state in teleported content

Notes

• The teleport target must exist in the DOM when the component mounts
• Teleported content shares the same Vue instance as the parent
• State, computed properties, and methods work normally
• Use v-if inside @teleport for conditional rendering