useBreakpoints

リアクティブなビューポートのブレークポイント。

使用法

import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)

const smAndLarger = breakpoints.greaterOrEqual('sm') // sm以上
const largerThanSm = breakpoints.greater('sm') // smより大きい
const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg以下
const smallerThanLg = breakpoints.smaller('lg') // lgより小さい

<script setup lang="ts">
import { useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints({
  mobile: 0, // オプション
  tablet: 640,
  laptop: 1024,
  desktop: 1280,
})

// 'mobile'、'tablet'、'laptop'、'desktop'のいずれか
const activeBreakpoint = breakpoints.active()

// true または false
const laptop = breakpoints.between('laptop', 'desktop')
</script>

<template>
  <div :class="activeBreakpoint">
    ...
  </div>
</template>

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

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

import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

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

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

プリセット

• Tailwind: breakpointsTailwind
• Bootstrap v5: breakpointsBootstrapV5
• Vuetify v2: breakpointsVuetifyV2 (非推奨: breakpointsVuetify)
• Vuetify v3: breakpointsVuetifyV3
• Ant Design: breakpointsAntDesign
• Quasar v2: breakpointsQuasar
• Sematic: breakpointsSematic
• Master CSS: breakpointsMasterCss
• Prime Flex: breakpointsPrimeFlex
• ElementUI / ElementPlus: breakpointsElement

ブレークポイントプリセットは、VueUseのスコープを持たせるためにuseで始まらないため、自動インポートされません。明示的にインポートする必要があります:

import { breakpointsTailwind } from '@vueuse/core'
// その他も同様