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

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

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



# TreeShakeを設定する

Vuetifyのビルドサイズを削減する。
[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)が使用されるコンポーネントだけを選択してビルドしてくれる。
参考: 
[TreeShaking - Vuetify公式](https://vuetifyjs.com/ja/features/treeshaking/#vuetify-loader)
[TreeShakingとは](https://qiita.com/soarflat/items/755bbbcd6eb81bd128c4)
[TreeShaking - webpack公式](https://webpack.js.org/guides/tree-shaking/)


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

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

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

# テーマカラーを設定する

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

- [Vuetifyのカラーパレット](https://vuetifyjs.com/ja/styles/colors/#section-30de30c630ea30a230eb30ab30e930fc)から`colors`で各色を取得できる。
- テーマカラー名は独自に作成することも可能:art:
- テーマカラーをコンポーネントのstyle内やcssで使う場合`customProperties`をtrueにする必要がある。(※[参考](https://vuetifyjs.com/ja/features/theme/#section-30ab30b930bf30e030d730ed30d130c630a3))

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

**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
        }
      }
    }
  },
```

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

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

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

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

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

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

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

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

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

```js
// 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フォントを使うには:question:

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

アイコン用Webフォントを使う場合、都度定義する必要がある。(:bulb:事前に使いたいWebフォントをインストールする必要がある)
[参考](https://vuetifyjs.com/ja/features/icon-fonts/#material-icons)

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


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