Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

Wire Ignore in Livewire v4

Prevent Livewire from updating specific DOM elements.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Basic Usage with Select2
  2. Self Only - Ignore Parent, Update Children
  3. With Chart.js
  4. With TinyMCE Editor

Use wire:ignore to prevent Livewire from updating specific DOM elements, essential for third-party JavaScript libraries.

Basic Usage with Select2

blade
<!-- 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

blade
<!-- 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

blade
<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

blade
<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>
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read