Enquire.js seems not to work with Vue.js version 2.0

401 views Asked by At

I want to use Enquire.js in my Vue.js(v 2.0) project. There are a bunch of examples on the internet where users integrating Enquire with Vue.js. For example here: https://jsfiddle.net/Linusborg/843dk9zs/

When I integrate Enquire.js in my Vue.js/webpack project it doesn't work and gave no error messages at all in the console. I don't know exactly what I'm doing wrong here.

This is my code, located in main.js My root file for the application.

import Vue from 'vue'
import Enquire from 'enquire.js' //installed using NPM
require('./stylesheet.css')

new Vue({
  el: "#app",
  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;
        console.log("the screen is now small");
      },
      unmatch: function() {
        self.displayIsLarge = true;
        console.log("the screen is now large");
      }
    })
  }
0

There are 0 answers