无法将 FontAwesome 与 NuxtjS3 一起使用

Question

I'm trying to use FontAwesome with NuxtJS but it doesn't work for unknown reasons.

Here is my package.json :

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.6",
    "sass": "^1.54.0",
    "sass-loader": "^13.0.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-regular-svg-icons": "^6.1.2",
    "@fortawesome/free-brands-svg-icons": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@fortawesome/vue-fontawesome": "^3.0.1",
    "@nuxtjs/fontawesome": "^1.1.2"
  }
}

Here is my nuxt.config.ts :

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    buildModules: ['@nuxtjs/fontawesome'],
    fontawesome: {
        icons: {
            solid: ['faHome']
        }
    }
})

Now pages/index.vue :

<template>
  <div>
    Hello
  </div>
</template>

As you can see I'm not even using any icon in this example, yet my app cannot start due to the following error in the Terminal (when I run npm run dev ).

ℹ Vite client warmed up in 440ms                                                                                                                                  12:52:57
ℹ Vite server warmed up in 113ms                                                                                                                                  12:52:57
✔ Vite server built in 812ms                                                                                                                                      12:52:58
✔ Nitro built in 178 ms 
[h3] [unhandled] H3Error: Cannot read properties of undefined (reading 'component')
    at createError (file:///Users/thomasgysemans/Documents/GitHub/vue-portfolio/node_modules/h3/dist/index.mjs:191:15)
    at Server.nodeHandler (file:///Users/thomasgysemans/Documents/GitHub/vue-portfolio/node_modules/h3/dist/index.mjs:381:21) {
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: 'Internal Server Error'
}

I don't understand this error and it seems like I am the only one to have it. Also, I'm new to NuxtJS and Vue.

I am following the documentation of @nuxtjs/fontawesome , and if I understand it well, I'm doing nothing wrong... Well I hope I made a simple mistake that will be solved lol. I really want to use FontAwesome , and it should work as FontAwesome itself provides a documentation on how to use their icons with Vue (but nothing related to NuxtJS).

Edit

Also, the app shows this as plain text, in a black background, but it doesn't show my beautiful "Hello".

{
  "statusCode": 404,
  "statusMessage": "Not Found",
  "stack": []
}

Answer 1

Found the answer thanks to 'kissu'. Actually, FontAwesome had given answers at this link: https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt