こんなことがありました
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.については、最新版の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使いはバージョンアップする価値があるのではないでしょうか。