# MatchMedia

The matchMedia (opens new window).

# Parameters

import { useMatchMedia } from "vue-composable";

const matchMedia = useMatchMedia(mediaQueryString);
Parameters Type Required Description
mediaQueryString String true A string representing the media query to parse.

# State

The useMatchMedia function exposes the following reactive state:

import { useMatchMedia } from "vue-composable";

const { supported, mediaQueryList, matches } = useMatchMedia();
State Type Description
supported Boolean Is MatchMedia supported
mediaQueryList MediaQueryList (opens new window) List of objects stores information on a media query
matches Ref<Boolean> A Boolean that returns true if the document currently matches the media query list, or false if not.

# Methods

The useMatchMedia function exposes the following methods:

import { useMatchMedia } from "vue-composable";

const { remove } = useMatchMedia();
Signature Description
remove Manually removes the event listener

# Example

Screen less than 600px: false

# Code

<template>
  <div>
    <p>
      Screen less than 600px: <b>{{ matches }}</b>
    </p>
  </div>
</template>

<script>
import { useMatchMedia } from "vue-composable";

export default {
  name: "match-media-example",
  setup() {
    return useMatchMedia("(max-width: 600px)");
  }
};
</script>