Nuxt2でAwesomeFontを使いたいだけ。

https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt

これに従った。

Web開発始めたばっかりだと、全ステップで細かくつまづくのなんなんだろう。
0.1歩づつしか進めない。たまに後退してる。

エラー
Unknown custom element: <font-awesome-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

解決法
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
Vue.component('fa', FontAwesomeIcon);
これを.tsか.jsファイルのどっかで呼ぶ。
font-awesome-iconって長くて使いにくいので、faにした。
そしてこんなふうに使う。
<fa icon="fa-solid fa-user-secret" />

エラー
Could not find one or more icon(s) {prefix: 'fas', iconName: 'user-secret'} {}

解決法
import { library } from '@fortawesome/fontawesome-svg-core';
import { faUserSecret } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; library.add(faUserSecret)
さっきの解決法に付け足し。
でもこれだとfaUserSecretしか使えない。。！！なんで！！全部使わせてくれ！！

解決法２
import { fas } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(fas)
Vue.component('fa', FontAwesomeIcon);
これで全部使える！！！これだけでいいじゃん！
一個づついちいち追加したい人はいるのか？

完了！！

と思ったらできてなかった。
<fa icon="fa-solid fa-user-secret" />
は使えるけど
<fa icon="fa-solid arrow-up" />
は使えない。

解決法
<fa icon="fa-solid fa-arrow-up" />
アイコン名の前にfa-をつけなきゃいけない。

今度こそ完了！！

後日追記（本当の解決法）

configファイルにcssとpluginsの内容追加すればいいだけだった。
ちゃんと書いてあった。
よく読もう。

// Modify nuxt.config.js adding to the `css` and `plugins` sections.
css: [
  '@fortawesome/fontawesome-svg-core/styles.css'
]

plugins: [
  '~/plugins/fontawesome.js'
]