https://github.com/jofftiquez/vue-media-query-mixin
A vue mixin to get current media query, xs, sm, md and lg.
https://github.com/jofftiquez/vue-media-query-mixin
hacktoberfest media-queries mixins vue vue-mixin vuejs vuejs2
Last synced: 8 months ago
JSON representation
A vue mixin to get current media query, xs, sm, md and lg.
- Host: GitHub
- URL: https://github.com/jofftiquez/vue-media-query-mixin
- Owner: jofftiquez
- License: mit
- Created: 2017-08-12T20:02:34.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T19:50:58.000Z (about 3 years ago)
- Last Synced: 2025-03-30T04:51:11.105Z (8 months ago)
- Topics: hacktoberfest, media-queries, mixins, vue, vue-mixin, vuejs, vuejs2
- Language: JavaScript
- Homepage:
- Size: 679 KB
- Stars: 27
- Watchers: 2
- Forks: 4
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-media-query-mixin - A vue mixin to get current media query, xs, sm, md and lg. (UI Utilities [🔝](#readme))
- awesome-vue-zh - Vue媒体查询,混入 - Vue 2媒体查询mixin,可用于组件j和组件模板. 兼容bootstrap和vuetify视口. `wXS`如果屏幕宽度是xs则返回`wSM`如果屏幕宽度为sm等,则返回true ... (UI实用程序 / 响应式设计)
- awesome-vue - vue-media-query-mixin - Vue 2 media query mixin that can be used in both component js and component template. Compatible with bootstrap and vuetify viewports. `wXS` returns if screen width is xs, `wSM` returns true if screen width is sm, etc... (Components & Libraries / UI Utilities)
- awesome-vue - vue-media-query-mixin ★22 - Vue 2 media query mixin that can be used in both component js and component template. Compatible with bootstrap and vuetify viewports. `wXS` returns if screen width is xs, `wSM` returns true if screen width is sm, etc... (UI Utilities / Responsive Design)
- awesome-vue - vue-media-query-mixin - Vue 2 media query mixin that can be used in both component js and component template. Compatible with bootstrap and vuetify viewports. `wXS` returns if screen width is xs, `wSM` returns true if screen width is sm, etc... (UI Utilities / Responsive Design)
README
# 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
```javascript
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**
```javascript
this.wXS // boolean
```
**TEMPLATE**
```javascript
{{ wXS }} // boolean
// visible only on XS devices.
```
# API
| **data** | **description** |
| -------- | --------------- |
| `windowWidth` | `number` |
| `windowHeight` | `number` |
| `wXS` | `boolean` |
| `wSM` | `boolean` |
| `wMD` | `boolean` |
| `wLG` | `boolean` |
| `wXL` | `boolean` |