Currently, I am working on incorporating media queries using Enquire.js and Vue.js. The functionality seems to be in good shape when manually resizing the browser window. However, upon loading the document, no match is detected. This peculiar behavior becomes more apparent when toggling Chrome's device mode or accessing the site on a mobile device. Interestingly, everything works as expected when checking with the "Match & Unmatch Example" in said modes and devices. I am beginning to question if there is some sort of compatibility issue between Vue.js and Enquire.js, or could it be an error on my end?
The logic for the media queries resides within the ready hook of my Vue instance:
ready:
function () {
var self = this;
enquire.register("screen and (max-width: 400px)", {
match: function () {
self.displayIsLarge = false;
self.displayIsSmall = true;
},
unmatch: function () {
self.displayIsLarge = true;
self.displayIsSmall = false;
}
})
);
Within my Vue instance, I have defined the following data properties:
var menu = new Vue({
el: '#app',
data: {
displayIsLarge: true,
displayIsSmall: false,
In my HTML file, I utilize v-if="displayIsSmall" and v-if="displayIsLarge" to show/hide elements based on the size of the browser window. Check out the JsdFiddle example here.
I started thinking that the issue might be resolved by utilizing the Setup callback, implementing some conditionals, like so:
enquire.register("screen and (max-width: 400px)", {
setup: function() {
if (this.match) {
self.displayIsSmall = true;
} else {
self.displayIsSmall = false;
}
},
match: function () {
self.displayIsLarge = false;
self.displayIsSmall = true;
},
unmatch: function () {
self.displayIsLarge = true;
self.displayIsSmall = false;
}
})
However, this approach did not yield the expected results. Could you help identify what I am missing? Take a look at the JsdFiddle example here.
UPDATE
Even after trying Vue's beforeCompile and created hooks (replacing ready), I still haven't had any success.