📝

Nuxt 3 / Vuetify 3 アップデートで思ったこと

2023/12/22に公開

Nuxt

Vue.js

Vuetify

tech

この記事はゆるWeb勉強会@札幌 Advent Calendar 2023 の22日目の記事です。

ゆるWebなので、ゆるく書いてます。 😇
今回は、読書ネタ（今年読んだ本）だったり、レビュー考えみたいなところなど思うことがたくさんあって書きたいことたくさんあるなと。。

その中から、今年1番時間を割いてるアップデートの話を書きたいと思います。

今年は、年明けくらいからずっと Nuxt 3へのアップデート作業を行っていた気がします。
Vue 2は今年でサポートが終了するので、既存のアプリケーションをアップデートすることがマストになっていました。

利用している構成は、Nuxt / Vuetify / i18 / Vuex / その他ライブラリ（ApexCharts や blockly.js）などを利用していました。
アプリケーションのアップデートで1番の課題は、Vuetify 3へのアップデートと思っていました。

まだ、対応中なこともあって対応完了した！までいけなかったのですが、今年のAdvent Calendarのネタとして書いておきます。

個人所感

先に Vuetify 3 を触った個人的な所感を書かせてもらいます。

Vuetify 3がリリースされた今年の最初の頃に、利用コンポーネント状況を確認してアップデートできるかなどを検証しました。
しかし、1番利用頻度が多い v-data-table が未対応が続いておりプロダクト環境を移行できない状況が続いてました（3.4系が先月リリースされて対応された）

そのためアップデート当初は、Vuetify 3を使うかTailwindといった別のフレームワークを利用するかが検討部分でした。
好きな人には申し訳ないですが、個人的にいえば別のフレームワークを利用して自前でコンポーネントを作ったほうが良かったと思っています。

プロダクト環境でどこまで依存している（機能依存）のか判断もむずしい（既存の振る舞いを変えずに）ので、Vuetify 3へのアップデートをすることに決まりました。

作り直すコストがあれば、コンポーネントを整理しつつ依存が少ないHeadless UIを使ったほうが良いと感じました。（あくまでも個人の意見です）

利用したいコンポーネントの対応が遅かった

1番大変というか待っていたのが、利用したいコンポーネントが対応が遅い状況でした。以下のページをずっと眺める日々でした。

第3クォーターっていつなんですかね？という会話をしてた記憶があります。（笑）

とくにずっと待ってたのが、v-data-tableの対応でした。
このコンポーネントは Labs（研究段階）フェーズではありましたが、将来変更がかかるという理由から利用を見送っていました。

対応できるところから進めていました。

ドキュメントがOptions API形式のまま（変更部分は多い）

Nuxt3から従来のOptions APIからComposition APIに書き直す対応を進めていました。
Nuxt2ではOptions APIで書いてた部分を新環境ではCompositon APIに書き直しています。

Options APIがなくなることはないにしても、TSの型定義だったり書きやすいさを考慮するとComposition APIで書き直すのが良いと思っています。
（手順的なのはあれこれ思ってることはありますが。。。）

Composition APIで書き直し始めて、MixinsをComposableに書き直したり色々行っています。
しかし、肝心のVuetifyのドキュメントが Otions API形式のままでした。 😇

そのため、既存コードをComposition APIにかきなすときは以下の脳内変換が必要になります。

既存のOptions API の形式を refに脳内変換しつつ書き換える
refに書き直して Vuetifyのコンポーネントに組み込めるか検証
- 1番苦戦したのが、オプションだったり書き方はどのようにするの？
- いままで書いてたオプションがなかったり、書き方が変わったりしてる？ etc...

個人的に変更した部分は、ドキュメントに記載してほしいなと思いました。
コード読んだりドキュメントを読んでなんとなく理解を深めるのに時間がかかってました。

Vuetifyのアイコンがmaterialで表示されない

Vuetify 3を Storybookで展開しつつコンポーネントの見た目を修正していて、いままで使ってたアイコンが表示されなかったりしました。
巷の記事とか参考にしてたんですが、公式を探せなかった。。

マテリアルアイコン使うときは、iconsの設定が必要のようです。（3時間くらい溶かしてしまいました）

import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
const vuetify = createVuetify({
   icons: {
       defaultSet: 'mdi',
       aliases,
       sets: {
           mdi,
       },
   },
});

まとめ

ゼロベースでVuetify3を使うことも一つの選択肢（時間的な理由等）ではありますが、プロダクト環境下では考慮がたくさんあり苦戦している状況です。
Vuetify以外の課題もたくさんありますが、Nuxt3 / Vuetify 3 (Next > i18n やその他ライブラリ)へのアップデートはかなり時間がかかりそうです。

この件に関しての技術メモはたくさん残してるのに文書化・言語化できてない部分は引き続きアウトプットしていきたいと思っています。

来年も引き続き、アップデート作業ではありますが完了できるように頑張ります。（汗）

おまけ

最後に、ライブラリの検証だったりで使ってるリポジトリも公開しておきました。
主にテストコード書き方だったりComposition APIだったらどう書くの？とかをコードをチマチマかいてます。
だれかの参考になればと思っています（笑）

良いお年を！😄

2024年1月11日の追記

サンプルコードが Options API で書かれてあったが、以下の設定をすることで Composition API のサンプルコードに切り替えすることができる

メニューバーの設定から Composition API を選択する