https://github.com/pearofducks/vue-simple-media
lightweight matchMedia plugin for Vue
https://github.com/pearofducks/vue-simple-media
javascript matchmedia vue
Last synced: 2 months ago
JSON representation
lightweight matchMedia plugin for Vue
- Host: GitHub
- URL: https://github.com/pearofducks/vue-simple-media
- Owner: pearofducks
- Created: 2018-06-02T09:40:49.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-12T11:47:13.000Z (almost 5 years ago)
- Last Synced: 2025-03-15T05:37:07.058Z (3 months ago)
- Topics: javascript, matchmedia, vue
- Language: JavaScript
- Homepage: https://pearofducks.github.io/vue-simple-media/
- Size: 128 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> vue-simple-media
an alternative to other mediaMatch plugins with a focus on simplicity and minimal module size (less than 1kb minified)
# use
#### install
This plugin requires Vue 2.6 or greater.
`npm install vue-simple-media`
`Vue.use(media)` will use the default breakpoints (shown below)
To specify your own media queries:
```javascript
Vue.use(media, {
mobile: 'screen and (max-width: 768px)',
desktop: 'screen and (min-width: 768px)'
})
```
Note: if sourcing this plugin from a browser script tag, put breakpoints on `window.breakpoints` before this plugin loads
Keys used will then be available on the _$media_ object.
#### $media global
- `this.$media.current` - provides an **array** of the currently matched media
- `this.$media.KEY` - provides a **boolean** of whether this specified media is currently matched
Example:
`if (this.$media.desktop) // do stuff`
#### v-breakpoint directive
The function provided to the directive is called whenever media changes are detected.
The callback is given the element and `$media.current` as its parameters.
Example:
`
`
```javascript
mediaChangeCallback(element, currentMediaList) {
if (currentMediaList.includes('desktop')) {
element.style.color = 'red'
}
}
```