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: 3 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 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T19:50:58.000Z (about 2 years ago)
• Last Synced: 2024-10-09T17:28:40.265Z (3 months ago)
• Topics: hacktoberfest, media-queries, mixins, vue, vue-mixin, vuejs, vuejs2
• Language: JavaScript
• Homepage:
• Size: 679 KB
• Stars: 28
• Watchers: 3
• Forks: 4
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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` |