Skip to content

Nuxt + buefyでFontAwesomeを使うための設定

buefyはVue.js用にBulmaを軽量化したUIコンポーネントです。Vue用のCSS Framework、UIコンポーネントは色々ありますが、現時点ではBulmaで落ち着いてます。buefyでアイコンを扱う場合、ドキュメントではMaterial Design IconsFontAwesomeの2択で書かれてます。今回は、個人的に気に入ってるFontAwesomeをbuefyで使うまでの方法をメモして紹介します。

環境

  • Nuxt.js v2
  • nuxt-buefy v0.2.3 (現時点でv0.3以上では起動できませんでした)
  • fortawesome v1.0.9

buefyをインストール

Nuxt.jsを使う場合は、このページの下の方に書かれています。
$ yarn add nuxt-buefy
※versionが0.2.3になってるか確認 nuxt.config.js に下記を記載すれば buefy のインストールは終わりです。めちゃ簡単。
{
    modules: [
        // Simple usage
        'nuxt-buefy',

        // Or you can customize
        ['nuxt-buefy', { css: false, materialDesignIcons: false }],
    ]
}

FontAwesomeをインストール

$ yarn add @fortawesome/fontawesome-free-webfonts
nuxt.config.js に下記を記載すれば buefyFontAwesome が使えるようになります。めちゃ簡単。
  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',
  ],
[`evernote` not found]
Pocket

Be First to Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です