Vuetifyを1.5.5→2.0.0にアップグレードしたおはなし。

## こんなことがありました

vue + vuetifyでアプリを作ろうとvue-cliを叩いたのが7/23のこと。
実際にアプリを書き始めたのが7/24。
公式のリファレンスを見ながら感じる違和感。
『あれ、APIがなんか違う……』

そう、__Vuetifyが1.5.5から2.0.0にバージョンアップしたのだ！__

## TL;DR

* vuetifyを1.5.5から2.0.0にアップグレードしたよ。
* いくつか手直しが必要だよ。
* v2.0.0のリリースノートの場所が分かりづらかったから注意だよ。

## 環境

アプリのscaffoldはvue-cli v3で作りました。
vue.js + Vuetify + Typescriptを基盤にしています。
また、Typescriptで実装するにあたって、[vue-propety-decorator](https://www.npmjs.com/package/vue-property-decorator)を使うように設定しています。

## やったこと

1. 依存モジュールを変更しました。
2. 一部ソースを書き換えました。
3. 非互換を修正しました。

手順の1.、2.については、最新版のvue-cliでからのscaffoldを作って、diffを取りながら更新を行いました。

ちなみに、後から見つけたのですが、ここに書いてあることの殆どは[v2.0.0 Arcadia](https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0)に書いてあります。
が、__Vuetify公式ページからの遷移が分かりづらいので注意__。[Vuetify - Long Term Support](https://vuetifyjs.com/ja/getting-started/long-term-support)にリンクがありました。

### 依存モジュールの更新

最新の依存性を見ると、以下のようになっていました。

| モジュール | 必要アクション | バージョン |
|---|---|---|
| vuetify | 更新 | ^2.0.0 |
| sass | 新規 | ^1.17.4 |
| vue-cli-plugin-vuetify | 更新 | ^0.6.1 |
| vuetify-loader | 更新 | ^1.2.2 |
| stylus | 削除  | |
| stylus-loader  | 削除 | |

stylusを廃止して、sassを導入したようです。
yarnを使用しているので、ひとまずそれぞれを更新していきます。

``` bash
yarn add --dev sass@^1.17.4

yarn upgrade vuetify@latest
yarn upgrade vue-cli-plugin-vuetify@^0.6.1
yarn upgrade vuetify-loader@^1.2.2

yarn remove stylus
yarn remove stylus-loader
```

このとき、バージョン指定で導入したモジュールは ``packege.json`` 上『^』がバージョン情報の前につかないため、手作業で『^』をつけます。
この操作をした場合、yarnでは ``yarn.lock``との兼ね合いでうまく動かなくなるので、追加のコマンドを実行します。

``` bash
yarn cache clean
yarn
```

### 根幹を担うソースの変更

作り込みをする箇所以外で変更が必要なソースは2本あります。

1つ目はTypescriptでVuetifyを利用するために使用する``src/plugin/vuetify.ts``です。

``` diff
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 975696e..b1df13e 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -1,7 +1,11 @@
 import Vue from 'vue'
-import Vuetify from 'vuetify/lib'
-import 'vuetify/src/stylus/app.styl'
+import Vuetify from 'vuetify/lib';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+    icons: {
+               iconfont: 'mdi',
+       }
+});

-Vue.use(Vuetify, {
-  iconfont: 'mdi',
-})
```

依存性として``stylus``が削除された兼ね合いでしょうか、``import 'vuetify/src/stylus/app.styl'``が削除となっています。
また、``Vue.use()``の使い方と、Vuetifyのインスタンス化方法が変わっています。

2つ目はアプリのエントリポイントである``src/main.ts``です。

``` diff
diff --git a/src/main.ts b/src/main.ts
index 226a6da..e23e61c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import '@/plugins/vuetify';
+import vuetify from '@/plugins/vuetify';
 import App from '@/App.vue';
 import router from '@/router';

@@ -7,5 +7,6 @@ Vue.config.productionTip = false;

 new Vue({
   router,
+  vuetify,
   render: (h) => h(App),
 }).$mount('#app');
```

``src/plugin/vuetify.ts``のインポート方法が変更になっているのと、Vueインスタンスの作成の際、vuetifyインスタンスを注入しています。

### 非互換部分の改修

これは作り込みの程度によって変わってきますが、今回の対応で気になったのは以下のポイントでした。

#### App.vueのv-toolbar

アプリのヘッダとして、1.5.5版で作成されたApp.vueではv-toolbarを使用していました。
2.0.0のvuetifyで動作させると、高さがすごいことになって表示が崩れました。
そのため、2.0.0で導入された _v-app-bar_ に置き換えました。

#### v-data-tableのデータ注入

1.5.5では、_v-data-table_ タグ内で _template_ を設定して、行単位に定義していました。
また、_template_ 内でオブジェクトにアクセスする場合、``*.item.[プロパティ名]`` でアクセスする必要がありました。

これが2.0.0でガラリと変わります。
まず、 headersプロパティのカラム.valueプロパティの値とitemsプロパティのプロパティ名が一致していれば、_template_の指定が不要になりました。
イメージは以下のような感じです。

``` javascript
{
    headers: [
        {
            name: 'カラム',
            value: 'ColName',
        },
    ],
    items: [
        {
            ColName: 'あああ',
        },
    ],
}
```

また、 _template_ は 行単位ではなく、カラム単位に定義する形になりました。このとき、 _template_ 内でのオブジェクトのアクセスには、 ``*.[プロパティ名]`` でできるようになりました。

#### ボタンの配列の定義

ボタンを ``text-xs-right``などでとりあえず寄せているところがあったのですが、2.0.0から効かなくなりました。そのため、 _v-layout_ に対して``*-center`` などのユーティリティクラスを使うようにしたほうが良さそうです。

## おわりに

その他のコンポーネントについても、前述のリリースノートにあるとおり、いろいろと変更があります（v-card-titleの文字サイズが変わったりなどなど）。
バージョンアップにあたっては、そこまで大変じゃなかったな、という印象です。2.0.0ではTypescriptの完全対応がうたわれているので、Typescript使いはバージョンアップする価値があるのではないでしょうか。