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

続きを読む

プロフィール画像

こたぽん

ビールと生ハムが好き

フロントエンドエンジニア

Tokyo