Enquire.js and Vue.js, odd behavior

[ghost]

I'm doing media queries with Enquire.js and Vue.js. It all pretty much works when I resize the browser's window manually. However, nothing happens when switching Chrome's toggle device mode on or when accessing the site on a mobile phone. I checked with the "Match & Unmatch Example", and it works as expected in the said mode. I wonder if there's some sort of incompatibility between Vue.js and Enquire.js or am I doing something wrong?

The logic for the media queries is on my vue instance's ready hook:

ready:

    function () {

        var self = this;

        window.addEventListener("resize",
            enquire.register("screen and (max-width: 800px)", {
                match: function () {
                    self.displayIsLarge = false;
                    self.displayIsSmall = true;
                },
                unmatch: function () {
                    self.displayIsLarge = true;
                    self.displayIsSmall = false;
                }
            })
        );

On my vue instance, I've the following data propperties:

var menu = new Vue({
el: '#app',
data: {
    displayIsLarge: true,
    displayIsSmall: false,

On my html file, I'm using v-if="displayIsSmall" and v-if="displayIsLarge" to hide/display elements according to the browser's size.

Snapshots of large and small browser window firing expected behavior. Snapshot with Chrome toggle device mode on, not firing expected behavior.

[ghost]

The resize event handler is altogether superfluous. For a moment I thought it could even be the culprit. Unfortunately, calling enquire.register directly doesn't seem to change this annoying behavior. Here's a Jsfiddle with and without the window resize handler.

[ghost]

No luck either with Vue's beforeCompile or created hooks (instead of ready) and Enquire's setup callback:

 setup: function() {
                self.displayIsSmall = this.match;
                self.displayIsLarge = this.unmatch;
            },

[ghost]

solved

[WickyNilliams]

Good to hear! Enquire was designed with mobile first in mind, hence why unmatch only fires if match has previously fired. You should set sensible defaults for mobile, change them in a match for larger viewports, and then undo the changes in unmatch

Will close this issue

[ghost]

Thanks for the clarification! Had no idea about it before coming upon this issue. I wonder if it wouldn't be better to add this piece of information to the documentation?

[WickyNilliams]

It is covered in the docs :)

Unmatch: If supplied, triggered when the media query transitions from a matched state to an unmatched state

[ghost]

Ohh, I'm so dumm! My apologies!

[WickyNilliams]

You're not the first person to make this mistake, and i'm sure you won't be the last :) Don't worry

[ghost]

:-) Btw, thanks for the great library!