How to use FontAwesome with Nuxt3?

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

Here is how to setup this

yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome@latest-3

In a new /plugins/fontawesome.js file, put the following

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})

Inside of nuxt.config.ts

export default defineNuxtConfig({
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ]
})

You should now be able to use it like this

<template>
  <div>
    <font-awesome-icon icon="fa-solid fa-user-secret" />
  </div>
</template>

More info is available here: https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt