Пользовательские точки останова и импорт VueMq

Question

Я импортирую и пытаюсь определить мои контрольные точки в моем основном app.js

 import VueMq from 'vue-mq';

    Vue.use(VueMq, {
      breakpoints: {
        xsmall: 500,
        small: 768,
        medium: 1024,
        large: 1360,
        xlarge: 1800
      }
    });

Он связан с Vue с Vue.use, поэтому я должен иметь возможность использовать глобальные $mq в любом компоненте.

 {{ $mq }} 

Однако это просто возвращает точки останова по умолчанию (планшет, ноутбук), а не мои собственные.

Однако, если я снова импортирую все это в компонент, он будет работать.Я получаю ожидаемые строки - xsmall, small и т. Д.

import VueMq from 'vue-mq';
Vue.use(VueMq, {
  breakpoints: {
    xsmall: 500,
    small: 768,
    medium: 1024,
    large: 1360,
    xlarge: 1800
  }
});

Как заставить его работать глобально, без необходимости импорта в каждый компонент?

Answer 1

попробуйте установить этот компонент в vue, добавив функцию install в файл ввода компонента. Like:

import VueMq from './vue-mq.vue'
const VueMq = {
    install: function(Vue){
        Vue.component('VueMq', VueMq)
    }
}

export default VueMq