[Vuetify]Vuetifyのプロジェクト導入時に設定しておきたいこと

NuxtのプロジェクトにおいてUI FrameworkにVuetifyを選定したときに設定しておきたいことを備忘録としてまとめます

※今回はnuxt create nuxt-app <project-name>で作成したプロジェクトが対象になります。

TreeShakeを設定する

Vuetifyのビルドサイズを削減する。
vuetify-loaderが使用されるコンポーネントだけを選択してビルドしてくれる。
参考:
TreeShaking - Vuetify公式
TreeShakingとは
TreeShaking - webpack公式

nuxt.config.jsのvuetifyプロパティにtreeShake: trueを設定。

nuxt.config.js

vuetify: {
    // TreeShakeを設定する
    treeShake: true,
    customVariables: ['~/assets/variables.scss']
}

※VueCLIで作成したプロジェクトはデフォルトで設定されているらしい

テーマカラーを設定する

VuetifyではMaterialDesignのすべての色を、SassとJavascriptを利用して簡単に利用できる。(※参考)
また、プロジェクト単位でテーマにlight、darkを指定でき切り替えることができる。
lightとdarkそれぞれでテーマカラーを設定してプロジェクト内のカラー指定を管理するとメンテナンス性が高いだろう。

• Vuetifyのカラーパレットからcolorsで各色を取得できる。
• テーマカラー名は独自に作成することも可能
• テーマカラーをコンポーネントのstyle内やcssで使う場合customPropertiesをtrueにする必要がある。(※参考)

※カラーコードの直接指定もできる

nuxt.config.jsのvuetifyプロパティに下記のように設定。

nuxt.config.js

vuetify: {
    treeShake: true,
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
          // テーマカラー名は独自に作成することも可能
          normalWhite: colors.shades.white
        },
        light: {
          primary: colors.indigo.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.cyan.lighten5,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.darken2,
          normalWhite: colors.shades.white
        },
        // テーマカラーをコンポーネントのstyle内やcssで使うために必要
        options: {
          customProperties: true
        }
      }
    }
  },

定義したテーマカラーを実際に使うには

コンポーネントのtemplateからテーマカラーを使用する場合

<!-- 主に背景色を指定する -->
<v-btn color="primary">...</v-btn>
<div class="primary">...</div>

<!-- 文字色を指定する -->
<v-btn class="primary--text">...</v-btn>
<div class="primary--text">...</div>

コンポーネントのstyle内、cssファイルからテーマカラーを使用する場合

.base__btn {
  color: var(--v-primary-base);
}

定義したテーマ変更するには

コンポーネントからテーマ(dark or light)を変更したい場合

下記のようにVuetifyインスタンスからテーマを取得できるため、フラグを用意して切り替えることができる。

// true or false
this.$vuetify.theme.dark

WebフォントのCDN読み込みをOFFにする

デフォルトではWebフォントがライブラリが読み込まれるようになっているためビルドサイズも肥大化する。OFFにした方が良いだろう。

nuxt.config.jsのvuetifyプロパティにdefaultAssets: falseを設定。

nuxt.config.js

vuetify: {
    treeShake: true,
    customVariables: ['~/assets/variables.scss'],
    // 文字、アイコン用のWebフォントのデフォルト読み込みをOFFにする
    defaultAssets: false
    // 以下省略
}

実際にWebフォントを使うには

アイコン用Webフォントを設定する

アイコン用Webフォントを使う場合、都度定義する必要がある。(事前に使いたいWebフォントをインストールする必要がある)
参考

nuxt.config.js

vuetify: {
    treeShake: true,
    customVariables: ['~/assets/variables.scss'],
    defaultAssets: false,
    // 使いたいものだけ定義する
    icons: {
      iconfont: 'mdiSvg',
      values: {
         home: mdiHome,
         account: mdiAccount
      }
   }
}

私が最初に行った設定を書き留めました。また、追加があれば更新していきます！