https://github.com/flatanimals/vue-media-queries
Vue 2.0 media query helpers
https://github.com/flatanimals/vue-media-queries
bootstrap bootstrap4 bulma materializecss media-queries vue vue-mixin
Last synced: 9 months ago
JSON representation
Vue 2.0 media query helpers
- Host: GitHub
- URL: https://github.com/flatanimals/vue-media-queries
- Owner: flatanimals
- Created: 2017-01-18T17:55:51.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T16:29:05.000Z (over 3 years ago)
- Last Synced: 2025-08-04T03:05:12.536Z (10 months ago)
- Topics: bootstrap, bootstrap4, bulma, materializecss, media-queries, vue, vue-mixin
- Language: JavaScript
- Size: 499 KB
- Stars: 48
- Watchers: 2
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-media-queries
Vue.js v 2.1+ plugin for using mediaMatch based queries.
Thanks to [AStaroverov]( https://github.com/AStaroverov ) for creating [v-media-query](https://github.com/AStaroverov/v-media-query) which was the inspiration for this package.
*Note: As of v0.0.5, Output is now minified*
## Basic Usage
##### Setup
```javascript
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: '',
components: { App },
mediaQueries: mediaQueries
});
```
##### Vue Component
```vue
Screen Size:
Desktop
Tablet and Below
```
## Using common CSS Framework responsive bands
Currently, supported framework are:
- [Bootstrap 4](https://getbootstrap.com).
- [Bulma](https://bulma.io).
- [Materialize](https://materializecss.com/).
- [Tailwind](https://tailwindcss.com).
- [Spectre](https://picturepan2.github.io/spectre/).
PRs are welcome.
##### Bulma
```javascript
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: '',
components: { App },
mediaQueries: mediaQueries,
mixins: [CommonBands.Bulma.mixin]
});
```
##### Bootstrap 4
```javascript
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: '',
components: { App },
mediaQueries: mediaQueries,
mixins: [CommonBands.Bootstrap4.mixin]
});
```
##### Materialize
```javascript
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: '',
components: { App },
mediaQueries: mediaQueries,
mixins: [CommonBands.Materialize.mixin]
});
```
##### Tailwind
```javascript
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: '',
components: { App },
mediaQueries: mediaQueries,
mixins: [CommonBands.Tailwind.mixin]
});
```
##### Spectre
```javascript
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: '',
components: { App },
mediaQueries: mediaQueries,
mixins: [CommonBands.Spectre.mixin]
});
```