Nuxt.jsでFont Awesomeを使用する

【概要】Nuxt.jsのFont Awesomeのモジュールインストールから使用方法までをまとめています。【詳細】1. Font Awesomeを使用する為のモジュールをインストールする下記のコマンドでFont Awesomeのモジュールをインストールします。npm i nuxt-fontawesomenpm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesomenpm i @fortawesome/free-solid-svg-icons2. nuxt.config.jsにFont Awesomeを使用する為の設定をするmodule部分に追加するのとfontawesome部分を新規で記述する必要があります。詳細は下記になります。・nuxt.config.jsexport default { ...省略... modules: [ ...省略... // Font Awesome 'nuxt-fontawesome', ], ...省略... // Font Awesome configuration fontawesome: { imports: [{ set: '@fortawesome/free-solid-svg-icons', icons: ['fas'] }] },}3. Font Awesomeのアイコンを表示してみる今回は下記URLのcaret-upを使用してみます。Font Awesome: caret-upFont Awesomeで出力されているタグは下記になります。lt;i class"fas fa-caret-up"lt;/iNuxt.jsで使用する際にはVueファイルに下記のように記述します。lt;font-awesome-icon :icon"['fas', 'caret-up']" /ブラウザにてFont Awesomeのアイコンが表示されれば成功です。