Overview
少し前にポートフォリオサイトを Nuxt2 -> Nuxt3 にアップデートしましたが、このときに互換性がまだなかったので FontAwesome を一旦外す選択肢をしました。
久しぶりに調べたらどうやら Nuxt3 でも使えそうになっていたので FontAwesome をあらためて導入したのでその備忘録になります。
導入方法
Install dependencies
Vue で使う場合は以下の手順に沿って FontAwesome に関連する依存を入れます。
Setup Plugin
これがちょっとハマったのですが、Vue で使う場合には以下の公式の Setup Library の仕組みを入れれば大丈夫そうです。これは使いたいライブラリ群をコンポーネントに入れていくものなので CreateApp してる Root の Component でこの設定をすれば大丈夫そうですが、Nuxt は少し違います。
Nuxt3 で FontAwesome を使うためにすることは Plugin で FontAwesome の設定を追加することになります。
具体的には Nuxt3 でアプリケーションを実装したときに ./plugins というディレクトリが作成されるので、この Plugin 用のディレクトリに Nuxt の設定として FontAwesome を読み込む設定を追加します。
// ~/plugins/plugins.ts
import { fab } from "@fortawesome/free-brands-svg-icons";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
export default defineNuxtPlugin( ( nuxtApp ) =>
{
library.add( fas, fab );
nuxtApp.vueApp.component( 'font-awesome-icon', FontAwesomeIcon, {} );
} );
なおこの defineNuxtPlugin は他の読み込みしたいプラグインの設定も記載します。公式のドキュメントには以下のように記載してます。
調べると FontAwesome に限らず、コンポーネントを提供してくれるライブラリ群を読み込む場所としてこの defineNuxt* は使われるようですね。
How to use
Plugin で FontAwesome を読み込む設定を行ったらあとは SFC ファイルで FontAwesome のコンポーネントを使うことができます。
例えば以下の Twitter のアイコンを使いたい場合は SFC に以下のように記載します。
<font-awesome-icon icon="fa-brands fa-twitter" />
まとめ
FontAwesome を使いたいケースは多いと思うので今現在（Nuxt RC5) の状況での使い方をまとめました。すでに RC もだいぶ進んでいるので今回の使い方が大幅に変わることはないと思いますが、参考になれば幸いです。
余談
Nuxt3 の rc がなかなか上がらなかったのは vue-jest 依存のせいだった。
ポートフォリオサイトを乗り換えたときには Nuxt3 の RC1 を使っていたのですが、それ以降 RC のバージョンを上げるとビルドができなくなる、という問題に当たりました。
これ自体は以下の issue で上がっている RC1 と RC3 の互換がないことが関係していたのですが、
これを解消するために RC3 以上に上げようと思っても RC のバージョンを上げるたびにエラーが発生してしまいました。
そのため、一旦 npm rm vue-jest で削除してから 202207 時点で最新だった RC5 に上げました。
