かとのぼのマイコード・マイライフ

ウェブサービス開発者のブログ

Vue.jsのUIコンポーネントはBuefyが便利

f:id:katonobo:20190430130031p:plain

Vue.jsでSPAを作っているときに、レイアウトも楽をしたかったので良いUIフレームワークを探してたんですが、BuefyというUIフレームワークが導入が楽で扱いやすかったのでその感想と紹介です。

Buefyとは

Buefyのサイトに簡潔に説明されています。

Lightweight UI components for Vue.js based on Bulma

Buefyは、BulmaとVue.jsの組み合わせによる軽量なUIコンポーネントです。

BulmaはCSSフレームワークです。「ブルマ」と呼びます。

BuefyはそのBulmaにVue.jsを組み合わせているので、もちろんBulmaの機能も使えます。

Vue.jsのデータバインディングが簡単に使えるのでVue.jsのアプリとの相性が良いです。

使いたい機能が揃っている

使いたい機能はだいたいドキュメントに揃っている感じです。

見た目はBootstrapのようですが、BuefyとBulmaの方が少ないコードで実現されているような感じがしました。

bootstrapにもVue-bootstrapというものがありますが、個人的にはBuefyの方が使いやすく機能の使い勝手は一段上だと思います。

シンプルなコードで機能を実現できるので、見通しもスッキリな印象です。

導入方法

Buefyの導入は公式の以下のページが一番わかりやすいです。

buefy.org

npmのインストールして、main.jsにインポートするだけで使えるので便利ですね。

便利だと思った機能

使ってみて、自分が便利だと思った機能は以下です。

  • 画像のアップロード
  • タイムピッカー
  • タグ

画像のアップロードは自分で1から作るのはめんどくさいですが、Buefyなら数行のコードで実現できます。v-modelでデータバインディングするので、その場でアップデータした情報を表示できますし、DBサーバーなどへの登録も簡単です。

タイムピッカーとタグも楽です。Vue.jsとの相性が良いです。

他にも色々ありますが、使い方は大体ドキュメントにあるのと、Bootstrapの使い方に似ているのでBootstrapを使ったことがある方はとっつきやすいはずです。

 

Vue.jsでCSSフレームワークやUIコンポーネントを探している人はオススメです。