chasegiunta / vue-media-queries

Vue 2.0 media query helpers

vue-media-queries

Vue.js v 2.1+ plugin for using mediaMatch based queries.

Thanks to AStaroverov for creating v-media-query which was the inspiration for this package.

Note: As of v0.0.5, Output is now minified

Basic Usage

Setup

import Vue from 'vue';
import {MediaQueries} from 'vue-media-queries';
import App from './App';

const mediaQueries = new MediaQueries();

Vue.use(mediaQueries);

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  mediaQueries: mediaQueries
});

Vue Component

<template>
    <div>
        <div>
        <strong>Screen Size:</strong>
        </div>
        <div v-if="$resize && $mq.above(992)">Desktop</div>
        <div v-else>Tablet and Below</div>
    </div>
</template>

Using common CSS Framework responsive bands

Currently, supported framework are:

• Bootstrap 4.
• Bulma.
• Materialize.
• Tailwind.
• Spectre.

PRs are welcome.

Bulma

import Vue from 'vue';
import {MediaQueries, CommonBands} from 'vue-media-queries';
import App from './App';

const mediaQueries = new MediaQueries({
  bands: CommonBands.Bulma
});

Vue.use(mediaQueries);

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  mediaQueries: mediaQueries,
  mixins: [CommonBands.Bulma.mixin]
});

Bootstrap 4

import Vue from 'vue';
import {MediaQueries, CommonBands} from 'vue-media-queries';
import App from './App';

const mediaQueries = new MediaQueries({
  bands: CommonBands.Bootstrap4
});

Vue.use(mediaQueries);

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  mediaQueries: mediaQueries,
  mixins: [CommonBands.Bootstrap4.mixin]
});

Materialize

import Vue from 'vue';
import {MediaQueries, CommonBands} from 'vue-media-queries';
import App from './App';

const mediaQueries = new MediaQueries({
  bands: CommonBands.Materialize
});

Vue.use(mediaQueries);

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  mediaQueries: mediaQueries,
  mixins: [CommonBands.Materialize.mixin]
});

Tailwind

import Vue from 'vue';
import {MediaQueries, CommonBands} from 'vue-media-queries';
import App from './App';

const mediaQueries = new MediaQueries({
  bands: CommonBands.Tailwind
});

Vue.use(mediaQueries);

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  mediaQueries: mediaQueries,
  mixins: [CommonBands.Tailwind.mixin]
});

Spectre

import Vue from 'vue';
import {MediaQueries, CommonBands} from 'vue-media-queries';
import App from './App';
const mediaQueries = new MediaQueries({
  bands: CommonBands.Spectre
});
Vue.use(mediaQueries);
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  mediaQueries: mediaQueries,
  mixins: [CommonBands.Spectre.mixin]
});