How do you get font awesome setup on nuxt 3

Question

I am getting the below error hen I try and render this font awesome component in my nuxt 3 app, followed all the npm installs correctly and cannot get the icons in the app without any errors.

  at WeakMap.set (<anonymous>)  
  at normalizePropsOptions (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3966:11)  
  at createComponentInstance (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6957:23)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:171:22)  
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:608:12)  
  at _sfc_ssrRender (./.nuxt/dist/server/server.mjs:2939:33)  
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:253:13)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:188:16)  
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:608:12)  
  at _sfc_ssrRender (./.nuxt/dist/server/server.mjs:9374:31)

This is the line of code that breaks the app

<font-awesome-icon :icon="['fas', 'user']" />

nuxt.config file

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
    css: ["@/assets/css/tailwind.css"],
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            },
        },
    },
    plugins: ["~/plugins/fontawesome.js"],
    buildModules: [
        ["@pinia/nuxt", { disableVuex: true }],
        ["@nuxtjs/tailwindcss", { config: "@/tailwind.config.js" }],
    ],
    modules: ["@nuxtjs/tailwindcss"],
});

plugin file

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
// import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

export default defineNuxtPlugin((nuxtApp) => {
    // nuxtApp.vueApp.component("FontAwesomeIcon", FontAwesomeIcon);
    library.add(fas);
});

I used the plugin because for whatever reason setting up npm @nuxt/fortawesome does not work

package.json

    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/free-brands-svg-icons": "^6.1.1",
        "@fortawesome/free-solid-svg-icons": "^6.1.1",
        "@fortawesome/vue-fontawesome": "^2.0.8",
        "@supabase/supabase-js": "^1.35.3",
        "pinia": "^2.0.14"
    }
}

Answer 1

This is inconsistent with the latest updates. Here is how you should install font-awesome on Nuxt3.

1. Installation

npm i -D @fortawesome/fontawesome-svg-core
npm i -D @fortawesome/free-solid-svg-icons
npm i -D @fortawesome/free-regular-svg-icons
npm i -D @fortawesome/free-brands-svg-icons
npm i -D @fortawesome/vue-fontawesome@latest-3    <=== Extremely Critical

2. Nuxt Configuration

import { defineNuxtConfig } from '#app'; // remove if 'vue3' is recognised and global by default

export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/font-awesome.ts' },
  ],
})

3. Plugin Configuration

import { defineNuxtPlugin } from '#app'; // remove if 'vue3' is recognised and global by default

import {library, config} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {
  faHospital as farHospital
} from '@fortawesome/free-regular-svg-icons'
import {
  faCircleUser as fasCircleUser,
  faBars as fasBars,
  faHospital as fasHospital
} from '@fortawesome/free-solid-svg-icons'
import {faDiscord as fabDiscord} from '@fortawesome/free-brands-svg-icons'

// This is important, we are going to let Nuxt not 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(
  farHospital,
  fasHospital,
  fasBars,
  fabDiscord
)

export default defineNuxtPlugin(({vueApp}) => {
  vueApp.component('FontAwesomeIcon', FontAwesomeIcon)
})

1. Test Render

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'hospital']" />
    <font-awesome-icon :icon="['far', 'hospital']" />
    <font-awesome-icon :icon="['fas', 'bars']" />
  </div>
<template>

Answer 2

Using my solution here, based on unplugin-icons was able to solve OP's issue.

At the end, something like this is producing the exact same result, but it's universal, performant and you're doing the result only once for any kind of future library.

<script setup>
import IconXmark from `~icons/fa6-solid/xmark`
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
</template>

Answer 3

Install packages

pnpm i @fortawesome/fontawesome-svg-core
pnpm i @fortawesome/free-solid-svg-icons
pnpm i @fortawesome/free-regular-svg-icons
pnpm i @fortawesome/free-brands-svg-icons

Add this plugin

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faSms } from '@fortawesome/free-solid-svg-icons'
import { faFacebook, faTwitter } from '@fortawesome/free-brands-svg-icons'

library.add(faTwitter)
library.add(faFacebook)
library.add(faSms)

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

Enjoy

<template>
  <font-awesome-icon icon="fa-brand fa-whatsapp" />
</template>

Answer 4

I am using:

npm i @fortawesome/fontawesome-free

In my assets folder i import it:

//  /assets/main.css
@import "@fortawesome/fontawesome-free/css/all.min.css";

Note here: You need the exact path.

Now register it:

// nuxt.config.ts

import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
  css: ["~/assets/main.css"],
});

And yea, you are good to go. You can go to fontawesome, search for an icon and copy paste it:

<i class="fa-solid fa-user"></i>

Then you should be able to see it.

Answer 5

I don't know if this is due to a recent update but I had to add the name of the icon onto the end of the import statement like this:

import { faCartShopping } from '@fortawesome/free-solid-svg-icons/faCartShopping'