さようならVuetify。ようこそTailwind CSS

Nuxt2の時から愛用していたVuetifyの使用をやめ、Tailwind CSSに乗り換えました。Nuxt2からNuxt3への移行と同じく、Vuetify2から3への移行も一筋縄ではいかなかったのですが、久しぶりにバージョンアップしてみたところ（v3.3.9）、またバグが発生して対応が必要だったため、ここら辺で見切りをつけることにしました。

もちろん、このバグは私の環境に依るものかもしれないので、それを理由にVuetifyを悪く言うつもりはなく、その他にも色々と思うところがあって使うのをやめたのが正直なところです。

以下がVuetifyに見切りをつけた理由です。個人的な理由も含みます。

コアウェブバイタルに悪影響

v-appコンポーネントでレイアウトを組む際、レイアウト崩れが発生します。避ける方法もあるはずですが、Vuetify公式サイトが同じ現象になっているので、普通に使うと崩れるのだと思います。

このレイアウト崩れは、SEOに関係するコアウェブバイタルの点数を悪化させるため、サーチコンソールで長らくエラーになっていました。

これを避けるためにv-appコンポーネントを使わない、またはエラーが発生しないように使うなどの選択肢もありますが、それならUIライブラリを使う必要性がありません。

MUIとの違い

VueにとってのVuetifyと同じく、Reactにもマテリアル系のUIライブラリにMUIがあります。

VueとReactの違いとも言えるので、単純比較はできませんが、MUIを使っていて困ったことがないので、React系のプロジェクトではMUIを使うこともあります。

こういったUIライブラリの存在意義は「簡単に導入できて、楽にUIデザインができる」ことだと思っているので、セットアップに時間がかかって、何かしらのバグがある現状のVuetifyは使いづらいです。

汎用性が低い

Vuetifyだけでなく、UIライブラリ全般に言えることですが、UIライブラリは便利な反面、特定のフレームワークやライブラリに依存するため、汎用性が低い問題があります。

例えば、Vuetifyではv-appやv-rowなどの独自コンポーネントを使うのですが、今回のようにTailwind CSSに移行したり、Reactのプロジェクトに移行する場合、大幅な修正コストが発生します。

一方、Tailwind CSSでスタイリングする場合は、こういった修正コストが発生せず、非常に汎用性が高いです。

Tailwind CSSはクライアントワークで使っても問題ないというか、むしろクライアントワークでこそ真価を発揮するので、「どのプロジェクトでも使える技術」という意味では、VuetifyなどのUIライブラリよりも、Tailwind CSSなどのフレームワークにいち早く慣れておくのが良い気がします。

まとめ

何事もメリットとデメリットがあるので、上手く使うしか他ないのですが、現状のVuetifyはデメリットの方が大きいと感じています。

すぐに綺麗なUIデザインができるのがVuetifyの大きなメリットですが、Tailwind CSSにもコンポーネントやテンプレートがあり、さらに活用場面が多くなってきているので、セットアップの簡単さ、汎用性の高さなどを考慮し、上手く使い分けできるかが重要になってきそうです。