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": []
}

You should try this solution overall rather than trying to get something working for each icon library: https://stackoverflow.com/a/72055404/8816585 — kissu, Jul 31 '22 at 12:34
Tried that one? https://github.com/nuxt-community/fontawesome-module/issues/49 — kissu, Jul 31 '22 at 14:47

score 1 · Accepted Answer · answered Aug 02 '22 at 12:44

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

I don't quite understand the CSS "magic" here. I have neither config.autoAddCss in my plugin, nor css file imported in nuxt.config.ts, and I still see the FA icon with no problems. Is there some special reason for that? — Ellrohir, Oct 05 '22 at 21:33
Also for some reason, TypeScript doesn't like `nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})` ... I had to switch my plugin from .ts to .js to get rid of that annoying TS error (altough it works). .. and in fact, the empty array as 3rd argument doesn't seem to be required as well - but with two arguments, TS is still unhappy because of same type mismatch — Ellrohir, Oct 05 '22 at 21:36

How to use FontAwesome with Nuxt3?

Edit

1 Answers1