vue-media-queries

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

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]
});