Vue.js with Enquiry.js

Media queries in Vue.js with Enquiry.js

by John Doe

HTML

<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://rawgit.com/WickyNilliams/enquire.js/master/dist/enquire.js"></script>
<div id="el">
  <div id="large" v-show="displayIsLarge">large</div>
  <div id="small" v-show="displayIsSmall">small</div>
</div>

CSS

#el {
}

#large {
  height: 20rem;
  widht: 15rem;
  background: cornflowerblue;
}

#small {
  height: 10rem;
  widht: 5rem;
  background: yellow;
}

JavaScript

new Vue({
  el: "#el",
  data: {
    displayIsLarge: true,
    displayIsSmall: false
  },
  ready: function() {
    // Listen for changes in the browser's size
    window.addEventListener("resize",
      enquire.register("screen and (max-width:400px)", {
        match: function() {
          this.displayIsLarge = false;
          this.displayIsSmall = true;
          console.log("the screen is now small");
        },
        unmatch: function() {
          this.displayIsLarge = true;
          this.displayIsSmall = false;
          console.log("the screen is now large");
        }
      })
    );
  }
})