A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://Tarektouati.github.io/vue-use-web/functions/media-query.html below:

Website Navigation


Media Query | useWeb

the DOM provides features that can test the results of a media query programmatically , via the MediaQueryList interface and its methods and properties. Once you've created a MediaQueryList object, you can check the result of the query or receive notifications when the result changes.

# State
import { useMedia } from 'vue-use-web';

const isLg = useMedia('(min-width: 1024px)');

useMedia only returns a single value which is a boolean.

State Type Description matches Ref<boolean> If the query matches or not. # Example
<template>
  <h1>Is Desktop: {{ isLg }}</h1>
</template>

<script>
import { useMedia } from 'vue-use-web';

export default {
  setup() {
    const isLg = useMedia('(min-width: 1024px)');

    return { isLg };
  }
};
</script>
# Demo

TODO: Add cool live example!


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4