Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

こんなことがありました

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

filunK
にゃーん。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away