Vue3のCSS Frameworkの対応状況を調べてみる

はじめに

• Vue3の環境などを準備したので、開発するにあたり、CSSフレームワークを検討していく。

px-wing.hatenablog.com

px-wing.hatenablog.com

Vue3の各CSSフレームワークの対応状況

Vuetify

vuetifyjs.com

Vuetifyの現在のバージョンはVue3をサポートしていません。Vue3のサポートは次のリリースで提供されます。 Vuetify v3

。新しいプロジェクトを作成するときは、VueCLIプロンプトからVue2を選択したこと、または既存のVue2プロジェクトにインストールしていることを確認してください。

Bootstrap

• 対応するけど、そんなに急いでいなそう。まだ先のような感じです。 github.com

material

• Bootstrapと同様に対応する予定のようだが、まだ先のような感じです。 https://github.com/vuematerial/vue-material/issues/2277

buefy

• 対応中 github.com

Quasar

• 対応中 github.com

TailwindCSS

-　issueなどで上がっているが随時対応してそうな感じがするので、TailwindCSSを利用することを検討したいと思います。 github.com

結論

• Vue3のCSSフレームワークは対応中がほとんどなので、まだVue３の移行はもう少しまった方が良さそうですね。 でもVue３を触りたい場合、TailwindCSSが大丈夫そう。（想定）下記の「Vue.js 3 + TypeScript + Tailwind CSS2」テンプレートもあるので参考にして進めてみたいと思います。 github.com

• 間違っている情報がありましたら教えてください。