Breakpoint observer plugin for Vue.js using Vue observable.

BreakpointObserver.js

/**
 * A media query matcher plugin for Vue.js, to listen to 
 * matching breakpoints.
 *
 * @plugin
 * @example
 * const breakpoints = { mdDevice: '(max-width: 959px)' };
 * Vue.use(BreakpointObserverPlugin, breakpoints);
 * {
 *   computed: {
 *     mdDevice() {
 *       return this.$breakpointObserver.mdDevice;
 *     },
 *   },
 * }
 */
const BreakpointObserverPlugin = {
    install(Vue, breakpoints) {
        if (!breakpoints) {
            throw new Error(
                'Missing breakpoints options in BreakpointObserver.'
            );
        }

        const state = {};

        for (const condition in breakpoints) {
            const matcher = window.matchMedia(breakpoints[condition]);

            state[condition] = matcher.matches;

            matcher.addListener(() => {
                state[condition] = matcher.matches;
            });
        }

        Vue.prototype.$breakpointObserver = Vue.observable(state);
    },
};