Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vinalvess's avatar

Was wire:ignore removed from Livewire 3?

Hi there,

I can't find much information about wire:ignore being removed from livewire 3. I've been trying to update my app from livewire 2 to livewire 3 but some of my components rely on wire:ignore to work. If wire:ignore was removed indeed, is there a replacement for it on version 3?

0 likes
12 replies
LaryAI's avatar
Level 58

Yes, the wire:ignore directive was removed in Livewire 2. It was replaced with the wire:ignore.self directive in Livewire 3.

The wire:ignore.self directive allows you to ignore updates to the component itself, while still allowing updates to its child components.

Here's an example of how to use wire:ignore.self in a Livewire component:

<div>
    <input type="text" wire:model="name">
    <button wire:click="updateName">Update Name</button>
</div>
class MyComponent extends Component
{
    public $name;

    public function updateName()
    {
        // Perform some logic here
    }

    public function render()
    {
        return view('livewire.my-component')->layout('layouts.app');
    }
}

In this example, the wire:ignore.self directive is not used, so any changes to the input field will trigger a Livewire update. If you want to ignore updates to the input field, you can use wire:ignore.self like this:

<div>
    <input type="text" wire:model="name" wire:ignore.self>
    <button wire:click="updateName">Update Name</button>
</div>

Now, changes to the input field will not trigger a Livewire update, but clicking the "Update Name" button will still trigger the updateName method.

I hope this helps! Let me know if you have any further questions.

1 like
vinalvess's avatar

AI answered but my components still doesn't work with wire:ignore.self directive. Unfortunally if wire:ignore or wire:ignore.self doesn't work anymore, I'll have to return to version 2.

1 like
vinalvess's avatar

What worked for me was to add wire:key="{{uniqid()}}" at the parent level. but I'll try the x-ignore directive of alpinejs later to see if it does work.

boedyirh's avatar

I tried to combine wire:model and wire:ignore. But It doesnot work.

<input type="file"   wire:model="logo_company" wire:ignore.self accept='image/*'>

The input file keep uploading the file. I have javascript method() to preview the image without uploading it. The Livewire seems default to alway uploading the file. The idea is I only need to upload when the image is correct by preview it first.

Snapey's avatar

@boedyirh wire:ignore only ignores dom updates. I would fully expect wire:model to work.

How do you expect to preview the file?

MartinTh's avatar

@Snapey wire:ignore should ignore DOM updates but I doesn't work at all in livewire3 when everything is x-modelled and $wire.entangled. My whole mark-up is transferred every single time, instead of only updating the input elements in the DOM. 90kb are swapped on every little change in the values... Livewire3 seems to be lost when you make heavy use of alpineJS. It simply rerender your whole component which makes the use of AlpineJS and livewire3 together completely pointless.

Snapey's avatar

@MartinTh it always renders the full view

If your view is 90k then its proably too big for a single component.

Please or to participate in this conversation.