Nuxt2からNuxt3への移行について

Vue2のサポート終了が2023年12月31日までらしいので、基本的にNuxt2をNuxt3に移行する必要があるよねっと。

おそらくバージョンアップ対応というよりも、リプレース対応に近い気がするのよね。PHP7から8へのバージョンアップ対応とは比較にならないほど、やることが多いわけ。それらを整理してみたいと思う。

axiosを使うか、useFetchを使うか、$fetchを使うか

これは辛いね。interceptorの処理とか云々でエラーページにリダイレクトするかしないかとか色々処理あるから簡単に移行はできないと思う。だから、3でもaxiosを使い続けるしかないかな。axiosって今の時代に必要なのかは分からないけども。それか、useFetchや$fetchを使ってインターセプト処理が書けるかどうかよね。

Vuexを使わず、piniaを使う

piniaってアクションがないっぽいのよね。なんかミューテーションにいっぱい処理が入りそう・・。まぁ、別にいいけど、対応としてはactionsにある処理を全部mutationsに入れないといけないね。まぁ、純粋な、関数の入ったオブジェクト群だから、まぁいけるか。

Vuexって基本TypeScriptの型が効かなかったと思うけど、piniaはデフォルトで効くから、そこはかなり楽になるはず。今はミューテーションやアクションを書くたびに型定義してるからね。

Options APIを使わずに、Composition APIを使うだと?

せっかくNuxt3を使うんだったら、<script setup>って書きたいよね。で、現状はvue-property-decoratorを使ってるからさ。クラスベースで書いてるわけ。まぁ、そこも似てそうだからいいか。めっちゃ時間かかりそうだけど。

Bootstrapは使えるか

使えるっぽいけど、バージョン4なのよね。まぁいけるか。

Nuxt3+Bootstrap5 導入手順

バリデーションをどうするか

引き続きVeeValidateを使うしかないと思うが書き方がかなり変わってくるし、Composition API風に書こうとするとさらに変わっている。

yupとかよく分からないし。zodというのもある。ライブラリの選定から必要かもね。

多言語化(i18n)

Nuxt2では結構ゴリゴリ自作だったが、Nuxtモジュール(@nuxtjs/i18n)があるそうで。これを使った方がいいのか、それとも・・。コンポネのtemplate内でも使いたいし、バリデーションでも使いたいし、どこでも使いたいのだ。まぁ、できるだろうけどね。

参考リソース

tech.revcomm.co.jp