v-ignore
Preserve element content during template swaps.
Basic Usage
Protect third-party widgets or dynamic DOM that shouldn't be replaced when LiVue updates the template.
<!-- Preserve entire element and children -->
<div v-ignore>
<third-party-widget></third-party-widget>
</div>
<!-- Only preserve element itself, children can update -->
<div v-ignore.self>
<span>{{ dynamicContent }}</span>
</div>Modifiers
| Modifier | Behavior |
|---|---|
| (default) | Preserve entire element and all children |
| .self | Only preserve the element itself (attributes), allow children to update |
Common Use Cases
Third-Party Widgets
Protect external widgets that manage their own DOM (maps, charts, editors).
<div v-ignore>
<div id="google-map"></div>
</div>Rich Text Editors
Preserve editor state (CKEditor, TipTap, Quill).
<div v-ignore>
<div id="editor"></div>
</div>Video/Audio Players
Keep playback state uninterrupted.
<div v-ignore>
<video src="..." autoplay></video>
</div>iFrames
Prevent iframe reloads on every template update.
<div v-ignore>
<iframe src="https://example.com"></iframe>
</div>How It Works
During template swaps:
- Elements with v-ignore are saved with a unique ID
- The new template is applied
- Saved elements are re-inserted into their matching placeholders
Note: The element's position in the DOM must remain the same. If the structure changes significantly, ignored elements may not be restored correctly.