@webqam/vue-match-media NPM

Vue matchMedia

React to media query changes in your Vue application (useful for adaptive design).

Installation

npm install @webqam/vue-match-media

Usage

import Vue from 'vue';
import VueMatchMedia from '@webqam/vue-match-media';

// Define breakpoints you want to react to
const breakpoints = {
  s: '48em',
  m: '50em',
  l: '62em',
  xl: '75em',
};

// Load plugin
Vue.use(VueMatchMedia, { breakpoints });

<template>
  <div>
    <div v-if="$matchMedia.s">
      This content is visible only on devices above 48em.
    </div>

    <div v-if="$matchMedia.xl">
      This content is visible only on devices above 75em.
    </div>
    <div v-else>
      This content is visible only on devices under 75em.
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DemoComponent',
  };
</script>

Breakpoint syntax

const breakpoints = {
  // @media (min-width: 1920px)
  fullHD: 1920,
  // @media (min-width: 48em)
  medium: '48em',
  // Object notation
  // @media (max-width: 768px)
  mobile: { maxWidth: 768 },
  // @media (orientation: landscape)
  landscape: { orientation: 'landscape' },
  // Multiple features
  // @media (min-width: 62em) and (min-resolution: 150dpi)
  highDPIDesktop: {
    minWidth: '62em',
    minResolution: '150dpi',
  },
  // @media (min-width: 768px) and (max-width: 992px)
  tablet: [768, 992],
  // SSR support
  // In order to use SSR, you must provide a default value
  // @media (min-width: 62em)
  // Defaults to true during SSR, will be updated on client side
  large: {
    breakpoint: '62em',
    defaultValue: true,
  },
  // Defaults to false during SSR, will be updated on client side
  portrait: {
    breakpoint: { orientation: 'portrait' },
    defaultValue: false,
  },
};