今までVuetifyはよく使うものの、正直ちゃんとドキュメントを読まずに適当に使っていました。

掘ってみると便利機能が色々出てきたので、使いやすかったものをまとめておきます。

レスポンシブ系のsass変数

メディアクエリを書くのが楽。

@media #{map-get($display-breakpoints, 'md-and-up')}と書くと幅がmd以上の時に適用される。

@import '~vuetify/src/styles/styles.sass'
.sample
  @media #{map-get($display-breakpoints, 'md-and-up')} // md以上の時適用
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)

ブレークポイントの取得 map-get($grid-breakpoints, 'md')

.sample
  max-width: map-get($grid-breakpoints, 'md')

色の管理

nuxt.config.jsにテーマの設定を書けるが、themesの中の変数は自由に追加できる。

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      default: 'light',
      themes: {
        light: {
          primary: {
            base: '#2e2e2e',
            darken1: '#232323'
          },
          accent: '#aa0a22',
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
          gray: { // 追加
            base: '',
            lighten2: '#e9e9e9',
          },
          gold: { // 追加
            base: '#edece8',
            darken1: '#e8e3de',
          }
        }
      }
    }
  },

background-color

クラスに色名を書くとbackground-colorに適用される。下の例だとdivの背景が金色になる。色名だけ書いた場合はテーマで定義したbaseの色が適用される。darken-1も書くとdarken1が適用される。

<div class="gold darken-1">
</div>

color

色名--textで文字色(color)を設定できる

<div class="white--text">
  aaaaa
</div>

darken, lightenを設定するときはtext--{lighten|darken}-{n}をクラスに追加する。

margin, padding

公式

marginとpaddingを設定できるヘルパークラスがある。

<margin or padding><方向>-<数値>をクラスに書くと適用される

ex.1) margin-top: 16px

m(argin-)t(op: )-4(*4px)ということ

<div class="mt-4">
</div>

ex.2) margin-left: auto; margin-right: auto;

左右マージンをautoにして中央寄せしたいというのはよくある話

<div class="mx-auto">
</div>

ex.3) padding: 4px

多分aはallの略

<div class="pa-1">
</div>

ex.4) smの時padding: 16px; md以上の時margin: 0 auto;

メディアクエリで書くような条件も簡単にかける

<div class="pa-sm-4 mx-md-auto">
</div>

ブロック要素の上下中央寄せ

以下のクラスを親に持たせると子のブロック要素を上下中央寄せできる

• d-flex
• align-center
• justify-center

<div class="d-flex align-center justify-center">
  <div>
    <h4>sample</h4>
    <div>xxxxx</div>
  </div>
</div>