Vue.js with Enquiry.js

Media queries in Vue.js with Enquiry.js

by Stéphane Cabaret

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

enquire.register("screen and (max-width:400px)", {
  match: function () {
    console.log('original: matched')
  },
  unmatch: function () {
    console.log('original: unmatched')
  }
})

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