[Vuejs]-Changing a JS value according to media queries on vuejs

by

1👍

✅

You can use the window.matchMedia function to check in javascript if the window currently matches the given media query.

if (window.matchMedia("(max-width: 768px)").matches) {
   this.fullSideBar = false;
}

To react to the window size changes, use window.addEventListener("resize", myListener);:

function updateFullSideBar(evt) {
  // Check the innerWidth property or use window.matchMedia here too
  this.fullSideBar = evt.view.innerWidth < 768
}

window.addEventListener("resize", updateFullSideBar);
👤Kapcash

Leave a comment