Vue.jsやNuxt.jsで開発をしていると、CSSフレームワークを使って管理画面を開発することが結構あります。

今回は、Bootstrap-vueとVuetifyについて考えてみました。

Boostarap-vue

BootstrapをVue.jsで使えるようにしたのが、Bootstrap-vueになります。さすがBootstrapなんで、Gridなんかの書き方で困ることが少なく、検索すればたいていの困りごとは解決できますね。

Vuetify

これぞMaterial Designというくらい見た目が洗練されていますね。ただしユーザーガイドはぱっと読んだだけではわかりにくく、慣れるまでは多少の学習コストがかかりました。が、見た目の洗練されたデザインは学習コストを支払っても後悔しないものがありました。

Bootstrap-vueとVuetufyの使い分けについて

どんな機能を実装するか不透明でわからない、多少無理な依頼が来る可能性のあるものは、間違いなくBootstrapをオススメします。過去に培ったノウハウを再利用できるからです。Girdで困ることも少ないですし、ライブラリの数も多いです。

わたしの経験でお話すると、画像のカルーセルを実装するシーンがありました。Vurtifyには数多くのカルーセルライブラリがあるのですが、なかなか要件に合うものがなく、一方、Bootstrapではすぐに見つかったことがあります。自分でゼロから書く、またはもっと調査に時間を割けばVuetufyでも開発可能だっかたもしれませんが、Bootstrapの方がすぐに開発できちゃいました。

参考になりましたか？