buefyはVue.js用にBulmaを軽量化したUIコンポーネントです。Vue用のCSS Framework、UIコンポーネントは色々ありますが、現時点ではBulmaで落ち着いてます。buefyでアイコンを扱う場合、ドキュメントではMaterial Design IconsとFontAwesomeの2択で書かれてます。今回は、個人的に気に入ってるFontAwesomeをbuefyで使うまでの方法をメモして紹介します。
環境 Nuxt.js v2 nuxt-buefy v0.2.3 （現時点でv0.3以上では起動できませんでした） fortawesome v1.0.9 buefyをインストール Nuxt.jsを使う場合は、このページの下の方に書かれています。
command 1
$ yarn add nuxt-buefy ※versionが0.2.3になってるか確認 nuxt.config.js に下記を記載すれば buefy のインストールは終わりです。めちゃ簡単。
nuxt.config.js 1
2
3
4
5
6
7
8
9
10
11
12
{ modules: [ // Simple usage 'nuxt-buefy', // Or you can customize ['nuxt-buefy', { css: false, materialDesignIcons: false }], ] } FontAwesomeをインストール command 1
