vue-media
Like react-media but for Vue.js, and this library is pretty small, it's 969 bytes after minified without gzip.
Install
yarn add vue-mediaCDN: https://unpkg.com/vue-media/dist
Usage
<template> <div id="app"> <media :query="{minWidth: 500}">bigger than 500px</media> <media :query="{maxWidth: 500}">smaller than 500px</media> </div> </template> <script> import Media from 'vue-media' // Component is automatically registered if using CDN. export default { components: { Media } } </script>The value of query can also be a media query string like (max-width: 500px), for more info please see json2mq doc.
This component will only return the first one of child components.
<template> <media :query="{maxWidth: 600}"> <h2>hello world</h2> <my-other-component></my-other-component> <!-- this will not be use! --> </media> </template>Events
Use the media-enter and media-leave events.
<template> <div> <media :query="{maxWidth: 600}" @media-enter="mediaEnter" @media-leave="mediaLeave" > <h2>Hello world</h2> </media> <h2 v-if="greaterThan600">I'm now wider than 600!</h2> </div> </template> <script> import Media from 'vue-media' export default { components: { Media }, data() { return { greaterThan600: window.innerWidth > 600 } }, methods: { mediaEnter(mediaQueryString) { this.greaterThan600 = false }, mediaLeave(mediaQueryString) { this.greaterThan600 = true } } } </script>The first argument of the listener is a mediaQueryString like (min-width: 400px).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| visibleByDefault | boolean | false | Whether to show the element by default. |
Browser support
If you want to support legacy browsers (ie <= 10), please include a window.matchMedia polyfill.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Author
vue-media © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
egoistian.com · GitHub @egoist · Twitter @_egoistlily
