vue.jswindow-resizemutation-observers

MutationObserver on Vue Component

I'm trying to listen for my main component size being changed, so I can run some code. However the console.log isn't being fired at all however I can't see what I have done wrong.

mounted() {
    new MutationObserver((mutationsList, observer) => {
        console.log(mutationsList);
    }).observe(this.$el, { attributes: true });
}

Can anyone see the issue? It should fire when I resize the window as this resizes the div.

Solution

  • MutationObserver is an api designed to observe direct DOM updates. Since a window resize is not a proper DOM update, it won't work.

    I suggest you use a more basic approach:

    window.addEventListener('resize', (event) => console.log(event))

    Your code can only work with MutationObserver if your component size (width, height) is set directly in an attribute like style in the HTML since you use the config { attributes: true }.

    <div style="width: 200px">content</div>