0.1.0 • Published 7 years ago
vue-media-query-mixin v0.1.0
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.
vuetify
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 |