Use wire:ignore to prevent Livewire from updating specific DOM elements, essential for third-party JavaScript libraries.
Basic Usage with Select2
<!-- Livewire won't touch anything inside wire:ignore -->
<div wire:ignore>
<select
id="select2-users"
x-data
x-init="$('#select2-users').select2().on('change', (e) => $wire.set('userId', e.target.value))"
>
@foreach($users as $user)
<option value="{{ $user->id }}">{{ $user->name }}</option>
@endforeach
</select>
</div>Self Only - Ignore Parent, Update Children
<!-- Only attributes on THIS element are ignored, children still update -->
<div
wire:ignore.self
class="tab-container"
data-tabs-initialized="true"
>
<!-- These will still update when Livewire re-renders -->
@foreach($tabs as $tab)
<div class="tab {{ $activeTab === $tab->id ? 'active' : '' }}">
{{ $tab->content }}
</div>
@endforeach
</div>With Chart.js
<div wire:ignore>
<canvas
id="myChart"
x-data="{ chart: null }"
x-init="
chart = new Chart($el, {
type: 'line',
data: {{ json_encode($chartData) }}
});
$wire.on('chartUpdated', (data) => {
chart.data = data;
chart.update();
});
"
></canvas>
</div>With TinyMCE Editor
<div wire:ignore>
<textarea
id="editor"
x-data
x-init="
tinymce.init({
target: $el,
setup: (editor) => {
editor.on('change', () => {
$wire.set('content', editor.getContent());
});
}
});
"
>{{ $content }}</textarea>
</div>