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
$ yarn add @fortawesome/fontawesome-free-webfonts

nuxt.config.js に下記を記載すれば buefy で FontAwesome が使えるようになります。めちゃ簡単。

nuxt.config.js
1
2
3
4
5
6
css: [ 
  '@fortawesome/fontawesome-free-webfonts', 
  '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css', 
  '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css', 
  '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css',
],