@portal

Transport content to different areas of the page

The @portal directive allows you to transport sections of your template code to another part of the page. This is essential for injecting scripts, styles, or content into specific locations like the page head or body, regardless of where your component appears in the document.

Syntax

@portal(destination)
    <!-- Content to transport -->
@endportal

With additional parameters:

@portal(destination, id: "unique-id", includeOnce: true)
    <!-- Content included only once -->
@endportal

Portal Destinations

Destination

Description

pageStart

Before the opening <html> tag

pageEnd

After the closing </html> tag

headStart

At the start of the <head> element

headEnd

At the end of the <head> element

bodyStart

At the start of the <body> element

bodyEnd

At the end of the <body> element

Parameters

Parameter

Required

Description

destination

Yes

The target location for the content (see destinations table)

id

A unique identifier for deduplication across multiple components

includeOnce

When true, ensures the content is only included once per page

Examples

Injecting Scripts at Body End

The most common use case is injecting JavaScript at the end of the body:

@portal(bodyEnd)
    <script>
        console.log("Component initialized");
    </script>
@endportal

Include Once for Libraries

When including shared libraries like Alpine.js, use includeOnce to prevent duplicate includes when multiple instances of your component exist on the page:

@portal(bodyEnd, includeOnce: true)
    <script src="https://cdn.example.com/library.js"></script>
@endportal

Unique ID for Cross-Component Deduplication

When multiple different components might include the same library, use a consistent id to deduplicate across all of them:

@portal(bodyEnd, id: "com.realmacsoftware.alpine", includeOnce: true)
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
@endportal

Alpine.js Component Registration

@portal(bodyEnd, id: "com.realmacsoftware.accordion.alpine", includeOnce: true)
    <script>
        document.addEventListener("alpine:init", () => {
            Alpine.data("accordion", () => ({
                open: false,
                toggle() {
                    this.open = !this.open;
                }
            }));
        });
    </script>
@endportal

Transport a mobile navigation overlay to the start of the body:

@if(includeMobileMenu)
    @portal("bodyStart")
        <div x-data="mobileMenu" class="mobile-overlay">
            <!-- Mobile menu content -->
        </div>
    @endportal
@endif

Preload Critical Resources

Add preload hints to the head for performance optimization:

@portal(headStart)
    {{globalBgImageFetchPriorityLinkElement}}
@endportal

Custom Styles in Head

Inject component-specific styles into the page head:

@portal(headEnd, includeOnce: true)
    <style>
        .my-component {
            /* Component styles */
        }
    </style>
@endportal

Transport modal dialog markup to the end of the body for proper stacking:

@portal("bodyEnd")
    <div x-dialog class="modal-backdrop">
        <div class="modal-content">
            @dropzone("content", title: "Content")
        </div>
    </div>
@endportal

Best Practices

Use includeOnce for shared resources - Always use includeOnce: true when including libraries or scripts that should only appear once on the page.
Use consistent IDs across components - When multiple components might include the same resource, use the same id to ensure proper deduplication.
Prefer bodyEnd for scripts - Loading scripts at the end of the body improves page load performance.
Use reverse domain notation for IDs - Follow the pattern com.yourcompany.feature to avoid ID collisions.
Combine with conditionals - Use @if to conditionally include portal content based on component settings.

Previous@dropzone Next@if

Last updated 15 days ago

Was this helpful?

Good evening

@portal

Syntax

Portal Destinations

Parameters

Examples

Injecting Scripts at Body End

Include Once for Libraries

Unique ID for Cross-Component Deduplication

Alpine.js Component Registration

Mobile Menu at Body Start

Preload Critical Resources

Custom Styles in Head

Best Practices

Good evening

hashtagSyntax

hashtagPortal Destinations

hashtagParameters

hashtagExamples

hashtagInjecting Scripts at Body End

hashtagInclude Once for Libraries

hashtagUnique ID for Cross-Component Deduplication

hashtagAlpine.js Component Registration

hashtagMobile Menu at Body Start

hashtagPreload Critical Resources

hashtagCustom Styles in Head

hashtagModal Dialogs at Body End

hashtagBest Practices

Syntax

Portal Destinations

Parameters

Examples

Injecting Scripts at Body End

Include Once for Libraries

Unique ID for Cross-Component Deduplication

Alpine.js Component Registration

Mobile Menu at Body Start

Preload Critical Resources

Custom Styles in Head

Modal Dialogs at Body End

Best Practices