How do you get font awesome setup on nuxt 3

user_19337375 0
Viewed 933

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"
    }
}
font-awesome nuxt.js vue.js javascript
3 Answers

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>
user_43803840

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>
user_88165850

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.

user_109907370
Related