Posted at

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を使うように設定しています。


やったこと


  1. 依存モジュールを変更しました。

  2. 一部ソースを書き換えました。

  3. 非互換を修正しました。

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

ちなみに、後から見つけたのですが、ここに書いてあることの殆どはv2.0.0 Arcadiaに書いてあります。

が、Vuetify公式ページからの遷移が分かりづらいので注意Vuetify - 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を使用しているので、ひとまずそれぞれを更新していきます。

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との兼ね合いでうまく動かなくなるので、追加のコマンドを実行します。

yarn cache clean

yarn


根幹を担うソースの変更

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

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

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 --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の指定が不要になりました。

イメージは以下のような感じです。

{

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使いはバージョンアップする価値があるのではないでしょうか。