vue-media-query

Install

A media query component for vue.js

Install

> yarn add vue-media-query --save
 
> npm install vue-media-query --save

Usage

<media-query>

<template>
  <div id="app">
    <h1>demo2</h1>
    <media-query v-model="responsive" :query="query">
      <h2 :style="{wordBreak: 'break-all'}">{{title}}</h2>
    </media-query>
  </div>
</template>
 
<script>
import MediaQuery from 'vue-media-query'
 
export default {
  data() {
    return {
      responsive: {},
      query: {
        landscape: { orientation: 'landscape' },
        portrait: { orientation: 'portrait' },
      },
    }
  },
  computed: {
    title() {
      return JSON.stringify(this.responsive)
    },
  },
}
</script>

When you change the orientation of device (phone or browser). You can see the result will be changed.

The value of query can also be a media query string like (max-width: 500px), for more info please see json2mq doc.

This project is inspired by vue-media.

<media-query-provider>

<template>
  <media-query-provider :query="query">
    <router-view></router-view>
  </media-query-provider>
</template>
 
<script>
import { MediaQueryProvider } from 'vue-media-query'
 
export default {
  components: { MediaQueryProvider }
  
  data() {
    return {
      query: {
        landscape: { orientation: 'landscape' },
        portrait: { orientation: 'portrait' },
      },
    }
  }
}
</script>

<template>
  <h2>{{title}}</h2>
</template>
 
<script>
// sub component
export default {
  inject: ['media'],
  
  computed: {
    title() {
      return JSON.stringify(this.media)
    }
  }
}
</script>

Notice: Because of <media-query-provider> depends on provide/inject. So the version of Vue should be 2.2.0+.

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-query © blackcater, Released under the MIT License.
Authored and maintained by blackcater with help from contributors (list).

www.blackcater.win · GitHub @blackcater · Twitter @tomtang2015