Are you a visual learner?
Master Livewire with our in-depth screencasts
Watch now

Livewire's ability to make updates to the page is what makes it "live", however, there are times when you might want to prevent Livewire from updating a portion of the page.

In these cases, you can use the wire:ignore directive to instruct Livewire to ignore the contents of a particular element, even if they change between requests.

This is most useful in the context of working with third-party javascript libraries for custom form inputs and such.

Below is an example of wrapping an element used by a third-party library in wire:ignore so that Livewire doesn't tamper with the HTML generated by the library:

<!-- ... -->
<div wire:ignore>
<!-- This element would be reference by a -->
<!-- third-party library for initialization... -->
<input id="id-for-date-picker-library">
<!-- ... -->

You can also instruct Livewire to only ignore changes to attributes of the root element rather than observing changes to its contents using wire:ignore.self.

<div wire:ignore.self>
<!-- ... -->