vue-media-query-mixin

A vue mixin to get current media query, xs, sm, md, lg and xl.

Installation

NPM

npm install vue-media-query-mixin

YARN

yarn add vue-media-query-mixin

Installation

import Vue from 'vue';
import VueMediaQueryMixin from 'vue-media-query-mixin';

Vue.use(VueMediaQueryMixin, {framework:'vuetify'});

I added the framework option because there are css framework that have different media query breakpoints. E.g. bootstrap's xs is <=575 while on vuetify xs is <=599.

Frameworks Supported

Will use vuetify as default when "options" was omitted.

1. vuetify
2. bootstrap

Usage

JS

this.wXS // boolean

TEMPLATE

{{ wXS }} // boolean

<img src="..." v-if="wXS"> // visible only on XS devices.

API

| data | description | | -------- | --------------- | | windowWidth | number | | windowHeight | number | | wXS | boolean | | wSM | boolean | | wMD | boolean | | wLG | boolean | | wXL | boolean |