Level 122
You cannot. The data is shared with the client so dont put anything secret in there
1 like
Feb 26, 2024
6
Level 1
How to hide livewire wire:snapshot aka hydration from DOM
Hi guys, on the Livewire documentation for wire:snapshot they say this:
We will refer to the process of taking the snapshot as "dehydration" and the process of re-creating a component from a snapshot as "hydration".
#Dehydrating When Livewire dehydrates a server-side component, it does two things:
Renders the component's template to HTML Creates a JSON snapshot of the component
#Embedding the snapshot in the HTML
When a component is first rendered, Livewire stores the snapshot as JSON inside an HTML attribute called wire:snapshot. This way, Livewire's JavaScript core can extract the JSON and turn it into a run-time object:
< div wire:id="..." wire:snapshot="{ state: {...}, memo: {...} }" > Count: 1 < button wire:click="increment" >+< /button > < /div >
How to hide wire:snapshot when I run npm run dev or npm run build on Laravel v10.41.0 and Livewire v3 ?
Level 1
Thanks for this info @Snapey !
Level 1
@glvoq I decided to simply hide it after initializing the component help with jQuery )))) I have my own scripts structure, but this script just hides all the tags we need. But it is important not to hide the wire:id tag, otherwise the component will not be active.
let attrs = [
'snapshot',
'effects',
// 'id'
];
const snap = () => {
$('div').each(function () {
for (let i in attrs) {
if (typeof $(this).attr(`wire:${attrs[i]}`) !== 'undefined' ) {
$(this).removeAttr(`wire:${attrs[i]}`);
}
}
});
}
I call this script in layouts.app where I load content
1 like
Level 1
Hello, thanks for the function, works as expected, at least using livewire 3.4.9, if you want use VainillaJS instead of Jquery, follow this steps: in App.js write this
let attrs = [
'snapshot',
'effects',
// 'id'
];
function snapKill() {
document.querySelectorAll('div').forEach(function(element) {
for (let i in attrs) {
if (element.getAttribute(`wire:${attrs[i]}`) !== null) {
element.removeAttribute(`wire:${attrs[i]}`);
}
}
});
}
window.addEventListener('load',(ev) =>{
snapKill();
});
thanks @100odissey100@gmail.com,
Level 1
<div wire:snapshot = { } >
I have this in my browser console on localhost. is it going to be the same in production?
1 like
Level 6
isn't there a setting in the livewire config app ? I believe you can hide the snapshot.
Please or to participate in this conversation.