Vuetify ブレークポイントサービス使い方メモ

Vuetifyにはブレークポイントサービスというものがあり、ブレークポイントに応じて表示の出し分けや、プロパティの値を変更することができます。

そのサービスでよく使用したものを紹介します。

$vuetify.breakpoint.name

$vuetify.breakpointの name プロパティは、現在アクティブなブレークポイントの名前（xs、sm、md、lg、xl）を受け取ることができます。

name: string

使い方

ブレークポイントによってプロパティの値を変更

<template>
  <v-card :height="height">
    ...
  </v-card>
</template>

<script>
  export default {
    computed: {
      height () {
        switch (this.$vuetify.breakpoint.name) {
          case 'xs': return 220
          case 'sm': return 400
          case 'md': return 500
          case 'lg': return 600
          case 'xl': return 800
      },
    },
  }
</script>

$vuetify.breakpoint.ブレークポイント名（xs、sm、md、lg、xl）

ビューポートに応じて、各ブレークポイントがアクティブな状態かを判定します。

xs: boolean
sm: boolean
md: boolean
lg: boolean
xl: boolean

使い方

ブレークポイントがlgだったら要素を表示、それ以外は非表示

<h2 v-show="$vuetify.breakpoint.lg">
	Title
</h2>

ブレークポイントがxsだったらheightを100に、それ以外はheightを200に設定

<v-card :height="$vuetify.breakpoint.xs ? 100 : 200">
	Title
</v-card>

$vuetify.breakpoint.mobile

現在のビューポートがmobile-breakpointオプション（md以下）よりも大きいか小さいかに応じて、trueまたはfalseが返ります。

使い方

モバイル時に要素を表示

<h2 v-show="$vuetify.breakpoint.mobile">
	mobile
</h2>

画面サイズに応じてプロパティの値を変更

<v-carousel
  :hide-delimiters="$vuetify.breakpoint.mobile ? true : false"
>

$vuetify.breakpoint.ブレークポイント名AndDown

現在のビューポートが指定のブレークポイント以下であればtrue それ以外はfalse が返ります。

smAndDown: boolean
mdAndDown: boolean
lgAndDown: boolean

使い方

ブレークポイントがmd以下の時に要素を表示

<h2 v-show="$vuetify.breakpoint.mdAndDown">
	Title
</h2>

$vuetify.breakpoint.ブレークポイント名AndUp

現在のビューポートが指定のブレークポイント以上であればtrue それ以外はfalse が返ります。

smAndUp: boolean
mdAndUp: boolean
lgAndUp: boolean

使い方

ブレークポイントがmd以上の時に要素を表示

<h2 v-show="$vuetify.breakpoint.mdAndDown">
	Title
</h2>

参考

Display Breakpoints