@cwist/vue-match-media

Vue matchMedia

This fork is a port to Vue 3

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

Installation

npm install @cwist/vue-match-media

Usage

import { createApp } from 'vue';
import App from '@/App.vue';
import { createVueMatchMediaPlugin } from '@cwist/vue-match-media';

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

const VueMatchMediaPlugin = createVueMatchMediaPlugin({ breakpoints });

// Load plugin
createApp(App)
  .use(VueMatchMediaPlugin)
  .mount('#app');

<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>

Using composition API

<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>
  import { useMatchMedia } from '@cwist/vue-match-media';

  export default {
    name: 'DemoComponent',
    setup() {
      const matchMedia = useMatchMedia();

      return {
        matchMedia,
      };
    },
  };
</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,
  },
};

Contributing

Please see contributing guide.

License

MIT

TODO List

• SSR support (set a default breakpoint)
• Improve composition API use
• Add demo