iq-scm / vue-media

A CSS media query component for Vue.js

vue-media

Like react-media but for Vue.js, and this library is pretty small, it's 969 bytes after minification without gzip.

Install

yarn add vue-media

CDN: 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.

The media component will only return the first element or component passed to it. Example:

<template>
  <media :query="{maxWidth: 600}">
    <h2>hello world</h2>
    <my-other-component></my-other-component> <!-- this will not be used! -->
  </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

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. 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