Blade Tricks Intermediate Since Laravel 10.x

The @persist Blade Directive

Keep a DOM element alive across Livewire page navigations — prevent re-rendering of video players, maps, or complex widgets.

Overview

The @persist directive tells Livewire's wire:navigate SPA mode to preserve a DOM element across page navigations instead of re-rendering it. The element is physically moved to the new page's DOM without being destroyed and recreated.

Usage

Wrap any element you want to persist in @persist with a unique key:

@persist('player')
<div>
    <iframe
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        allowfullscreen
    ></iframe>
</div>
@endpersist

When the user navigates to another page (via wire:navigate), this iframe will survive the navigation — the video keeps playing uninterrupted.

Real-World Examples

Persisting an audio player across pages:

{{-- In your layout --}}
@persist('audio-player')
<div id="audio-player">
    <audio src="{{ $currentTrack }}" autoplay></audio>
    <div class="controls">...</div>
</div>
@endpersist

Keeping a map widget alive:

@persist('map')
<div id="map" x-data="mapWidget()" x-init="initMap()">
</div>
@endpersist

Requirements

  • Only works with wire:navigate SPA-mode navigation
  • The @persist block with the same key must exist on both the source and destination pages
  • Typically placed in a shared layout so it appears on every page

When to Use

  • Audio/video players that shouldn't restart on navigation
  • Interactive maps (Google Maps, Mapbox) that are expensive to reinitialize
  • Chat widgets or live feeds
  • Any third-party JavaScript widget with costly initialization

Tags

Performance Helpers