# MatchMedia
# 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>
← path breakpoint →