useMediaQuery

リアクティブなメディアクエリ。MediaQueryListオブジェクトを作成すると、クエリの結果を確認したり、結果が変化したときに通知を受け取ることができます。

使用法

import { useMediaQuery } from '@vueuse/core'

const isLargeScreen = useMediaQuery('(min-width: 1024px)')
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')

サーバーサイドレンダリングとNuxt

useMediaQueryをSSRが有効な状態で使用する場合、サーバーでレンダリングする画面サイズを指定し、ハイドレーションの不一致を避けるためにハイドレーション前に指定する必要があります。

import { useMediaQuery } from '@vueuse/core'

const isLarge = useMediaQuery('(min-width: 1024px)', {
  ssrWidth: 768 // SSRモードを有効にし、画面が768px幅であるかのようにレンダリングします
})

console.log(isLarge.value) // 768pxのssrWidthは1024pxより小さいため、常にfalse
onMounted(() => {
  console.log(isLarge.value) // 画面が1024px未満の場合はfalse、1024px以上の場合はtrue
})

または、provideSSRWidthを使用してアプリ全体でこれをグローバルに設定することもできます。