Vuetify2.x 色々カスタマイズしたいときのTips #Vue.js

はじめに

以前 Vuetify2.x でよく使うUIComponents まとめという記事を書きました。
私はずっとVuetifyを使っていて、基本的に用意されているUIコンポーネントを組み合わせてWebアプリの画面を作っています。
上記の記事でも紹介しているように、Gridデザインや、Tableやカレンダーといった、自前でやろうと思うとちょっとつらいな…と思うようなUIをコンポーネントとして用意してくれているのでとても便利です。
基本的にそれで事足りるのですが、デフォルトの設定を使っていると、「かゆいところに手が届かないな…」と感じる時があります。みなさんもありませんか？
そんなときのカスタマイズの方法を書いていこうと思います。

セッティング

Vue

VueCLIでVuetifyをインストールしていきます。

$ vue add vuetify
...
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) No
? Use custom theme? Yes
? Use custom properties (CSS variables)? Yes
? Select icon font Material Design Icons
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? Yes
? Select locale Japanese

src直下にstylesディレクトリ作成して、その下に variables.scss を置きます。
詳しくは SASS variables - Vuetify を見てください。

Nuxt

@nuxtjs/vuetify をインストールします。

$ npm i -D @nuxtjs/vuetify ( or yarn add -D @nuxtjs/vuetify )

nuxt.config.js にVuetifyを追加します。

nuxt.config.js

...
export default {
  buildModules: [
    '@nuxtjs/vuetify'
  ],
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true
  }
}

(おまけ)TypeScriptで書くときの注意

tsconfig.jsonのtypesにVuetifyを追加しないとうまく補完が効かないので注意

tsconfig.json

{
  "compilerOptions": {
  ...
    "types": [
      "vuetify"
    ]
  ...
  }
}

スタイルの上書き

Vuetifyでは各コンポーネントのスタイルを変数で定義しています。
https://vuetifyjs.com/en/customization/sass-variables/#variable-api

また設定されている変数を各Vueファイルで直接classを指定して上書きすることは非推奨です。
https://vuetifyjs.com/en/customization/sass-variables/#importing-in-variable-files

variables.scss で変数を上書きして対応します。下記は一例です。

variables.scss

$font-size-root: 14px; // 基本のフォントサイズ default:16px
$btn-text-transform: lowercase; // ボタンの文字を小文字にする default:uppercase

Slotを使う

スタイル以外にもカスタマイズしたいなーと感じる瞬間ありませんか？
例えばv-data-tableのheaderの部分とか、v-tree-viewとかとか…
そんなときはSlotをうまく使ってカスタマイズしていきます。
下記はv-treeviewのlabel部分をv-list-itemにする例です。

sample.vue

<template>
  v-treeview
    slot(name="label" v-bind="{ value, open }")
      v-list-item(dense)
        v-list-item-content
          v-list-item-title {{value.title}}
          v-list-item-subtitle {{value.subtitle}}
          v-spacer
        v-list-item-action
          v-btn(@click="action") action
</template>

各コンポーネントがどのような名前付きslotを持っているかは各ページのAPIに書いてあります。(参考)v-treeviewのAPI

さいごに

すごく簡単ではありましたがVuetifyのコンポーネントをカスタマイズする方法を紹介しました。
私と同じように「デフォルトのままだとちょっと物足りないな…」と感じたら、簡単なカスタマイズから始めてみてはいかがでしょうか？
ではまた！！！