Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

316
Views
How do you get font awesome setup on nuxt 3

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"
    }
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!