@wearelucid/vue-mq

Inline screensize/mediaquery check for any vue application 📱

Usage no npm install needed!

<script type="module">
  import wearelucidVueMq from 'https://cdn.skypack.dev/@wearelucid/vue-mq';
</script>

README

vue-mq

npm version JavaScript Style Guide license

Note: Draft, not quite production ready.

Vue.js 2.0+ plugin for media queries.

Installation

yarn add @wearelucid/vue-mq

Integration

import { MediaQueries } from 'plugins/mediaqueries'

// Define your breakpoints or import them from elsewhere
const breakpoints = {
  small: 400,
  medium: 768,
  large: 1100,
  huge: 1400
}

Vue.use(MediaQueries, { breakpoints })

And then use it in your components

// JSX Example
Vue.component({
  // ...
  render (h) {
    return (
      <div>
      {this.$query({ from: 'medium' })
        ? 'Small Content'
        : 'Large Content'}
      </div>
    )
  }
})

Use cases:

this.$query({ from: 'medium' })
this.$query({ from: 'small', to: 'large' })
this.$query({ to: 'large' })

Or, as another example, display the currentBreakpoint

// JSX Example
Vue.component({
  name: 'DevStats'
  // ...
  render (h) {
    return (
      <span> Current Breakpoint: {this.$mq.current.name} @ {this.$mq.current.value}px </span>
    )
  }
})

Todos

  • Validate reactive property. Is this correctly implemented? (_mq, mq, $mq)
  • Option to sync with CSS (e.g by reading breakpoints from JSON String, which we set 's font-size property)</li> <li class="task-list-item"><input type="checkbox" disabled>Implement alternative way to pass in breakpoints</li> <li class="task-list-item"><input type="checkbox" disabled>Tests</li> <li class="task-list-item"><input type="checkbox" disabled>Npm Compat</li> </ul> <h2><a id="browser-support" class="anchor" aria-hidden="true" href="#browser-support"></a>Browser Support</h2> <p>IE8+ (<a href="https://tylercipriani.com/blog/2014/07/12/crossbrowser-javascript-scrollbar-detection/">See clientWidth</a>) Uses <a href="https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia">matchMedia</a> for newer browsers but has a polyfill for IE8/IE9.</p> <h2><a id="license" class="anchor" aria-hidden="true" href="#license"></a>License</h2> <p><a href="LICENSE">MIT</a></p> </div></article> <aside><h2 class="svelte-1u3txz5">Details</h2> <dl class="details f-d1 svelte-1u3txz5"><div class="svelte-1u3txz5"><dt class="svelte-1u3txz5">Downloads (weekly)</dt> <dd class="f-mono f-h1"><div class="container svelte-a3j687"><div class="dot svelte-a3j687"></div> <div class="dot svelte-a3j687"></div> <div class="dot svelte-a3j687"></div> </div></dd> </div><div class="svelte-1u3txz5"><dt class="svelte-1u3txz5">Updated</dt> <dd><time class="" datetime="2018-10-01T05:09:01.417Z">October 1, 2018</time></dd> </div><div class="svelte-1u3txz5"><dt class="svelte-1u3txz5">Created</dt> <dd><time class="" datetime="2018-09-30T07:58:25.306Z">September 30, 2018</time></dd> </div><div class="svelte-1u3txz5"><div class="wrapper svelte-qjxoui"><dt class="header svelte-qjxoui"><span class="title svelte-qjxoui">Package score <a class="ml1 f-w400" href="https://docs.skypack.dev/package-authors/package-checks" target="_blank">learn more</a></span> <span class="f-u1"> <div class="container svelte-a3j687"><div class="dot svelte-a3j687"></div> <div class="dot svelte-a3j687"></div> <div class="dot svelte-a3j687"></div> </div></span></dt> <dd class="pt1"><ul class="checks"><li class="checks-check svelte-qjxoui"><span class="status__loading svelte-qjxoui" aria-label="loading"></span>Package Security </li><li class="checks-check svelte-qjxoui"><span class="status__warn svelte-qjxoui" aria-label="not added yet"></span> ES Module Entrypoint <a class="action svelte-qjxoui" href="https://docs.skypack.dev/package-authors/package-checks#esm" target="_blank" rel="noopener noreferrer">Info</a> </li><li class="checks-check svelte-qjxoui"><span class="status__warn svelte-qjxoui" aria-label="not added yet"></span> Export Map <a class="action svelte-qjxoui" href="https://docs.skypack.dev/package-authors/package-checks#export-map" target="_blank" rel="noopener noreferrer">Info</a> </li><li class="checks-check svelte-qjxoui"><span class="status__warn svelte-qjxoui" aria-label="not added yet"></span> Keywords <a class="action svelte-qjxoui" href="https://docs.skypack.dev/package-authors/package-checks#keywords" target="_blank" rel="noopener noreferrer">Info</a> </li><li class="checks-check svelte-qjxoui"><svg class="status__check svelte-qjxoui" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 9"><title>added License
  • added README
  • added Repository URL
  • TypeScript Types Info
License
MIT
Dependencies
2
Links
Collaborators