Nuxt 3 - Content duplicated by using font-awesome-icon

[thibault60000]

Describe the bug When I used the font-awesome-icon tag, my page content is duplicated

(in app.vue for example)

    <NuxtLayout>
        <NuxtLoadingIndicator />
        <h1> app.vue </h1>
        <font-awesome-icon class="text-active h-8" icon="fa-solid fa-user-secret" />

        <NuxtPage />
    </NuxtLayout>

My layouts/default.vue file

    <p class="bg-active text-white w-fit ">HEADER </p>
        <main>
            <slot />
        </main>
     <p class="bg-active text-white w-fit ">FOOTER</p>

I used fontawesome.js plugin

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

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

config.autoAddCss = false

library.add(fas)

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

I import '@fortawesome/fontawesome-svg-core/styles.css' on the css property of defineNuxtconfig

And this into my package.json dependencies

"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/vue-fontawesome": "^3.0.3",

I need to use Icon without duplicate 👎 Sorry I don't have codesandbox It's on Chrome.

I used lodash, moment, primevue, tailwind, it's for a big starter project

Issue with <font-awesome-icon />

If I remove the<font-awesome-icon /> tag :

It's duplicated only for the elements after the <font-awesome-icon /> tag

For example, If my tag is on the end of myapp.vue

        <NuxtLayout>
        <NuxtLoadingIndicator />
        <h1> app.vue </h1>

        <NuxtPage />
        <font-awesome-icon class="text-active h-8" icon="fa-solid fa-user-secret" />
    </NuxtLayout>

Nothing is duplicated

[Luffyyy]

I can confirm this is happening on latest build of Nuxt 3 (edge) Replacing the font-awesome-icon component seems to make the problem disappear. This only began happening after Nuxt 3.1

[thibault60000]

I can confirm this is happening on latest build of Nuxt 3 (edge) Replacing the font-awesome-icon component seems to make the problem disappear. This only began happening after Nuxt 3.1

Thanks for anwser I don't understand, what is the best solution to solve my issue ? 😔

[thibault60000]

It's my dependencies

[Luffyyy]

I can confirm this is happening on latest build of Nuxt 3 (edge) Replacing the font-awesome-icon component seems to make the problem disappear. This only began happening after Nuxt 3.1

Thanks for anwser I don't understand, what is the best solution to solve my issue ? 😔

Meant that replacing the component "fixes" the issue, but obviously disables font awesome.

[thibault60000]

I can confirm this is happening on latest build of Nuxt 3 (edge) Replacing the font-awesome-icon component seems to make the problem disappear. This only began happening after Nuxt 3.1

Thanks for anwser I don't understand, what is the best solution to solve my issue ? 😔

Meant that replacing the component "fixes" the issue, but obviously disables font awesome.

Use <i class="fad fa-dove" /> instead fix the issue.. :/

[sexnine]

This only began happening after Nuxt 3.1

I'm also having this issue. As a temporary fix I've wrapped the icon with <client-only></client-only>.

[ItzExotical]

Same issue. Any updates on when this will be fixed in the package? Quite annoying.

[sexnine]

Hey all, I've been using antfu's unplugin-icons library which supports fontawesome icons. It has worked flawlessly for me with SSR without the need for <client-only></client-only>.

Until this issue is fixed, using unplugin-icons works super well (and honestly don't know whether I'll ever go back to vue-fontawesome).

[Luffyyy]

I started using https://github.com/nuxt-modules/icon kinda embarrassing that a paid product pays no attention to simple issues like this. I'll probably not use it again.

[mkoe-unitb]

I think the build is broken.

For me everything was working after I created a new component FontAwesomeIcon.vue with this content:

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome/src/components/FontAwesomeIcon'
export default FontAwesomeIcon;
</script>

and installed the required "humps" dependency.

[jamescmacey]

I'm experiencing the same issue in Nuxt 3.4 (and was also experiencing it before I upgraded from Nuxt 3.0.0-rc4).

It seems to only occur when the FontAwesomeIcon is placed inside of an <a>, <NuxtLink> or <RouterLink> tag. While this is happening, I receive plenty of the following messages in the server log:

Could not find one or more icon(s) { prefix: 'fas', iconName: 'external-link-alt' } {}
Could not find one or more icon(s) { prefix: 'fas', iconName: 'check' } {}    

Despite these warnings, the icon does generate correctly on the client side.

The solution by @mkoe-unitb is working as a fix for me (for both the duplication and all the related warning messages)

[christine927t]

I think the build is broken.

For me everything was working after I created a new component FontAwesomeIcon.vue with this content:

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome/src/components/FontAwesomeIcon'
export default FontAwesomeIcon;
</script>

and installed the required "humps" dependency.

Thank you, this fixed the Hydration mismatch error and the "Could not find one or more icons..." console error.

"dependencies": {
    "@fortawesome/fontawesome-pro": "^6.4.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-regular-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/pro-regular-svg-icons": "^6.4.0",
    "@fortawesome/vue-fontawesome": "^3.0.3",
    "humps": "^2.0.1",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "nuxt": "^3.4.2",
    "vite": "^4.1.4"
  }

[Aurion72]

@jasonlundien Anything new on this issue ?

[codeofsumit]

I can confirm that the fix of creating a new component + installing humps works to remove the hydration warning.

Hopefully, this will be fixed in the corresponding libraries (nuxt or fontawesome)

[Trevor-143]

I had the same issue and what worked for me is i wrapped the icon on its own div

[Trevor-143]

this is what worked <li> <div><font-awesome-icon :icon="['fas', 'circle-check']" /></div>Must have license</li>

[a0s]

How i use awesomefonts with vite + vue3

FontAwesomeIcon.vue (should be included somewhere in root template):

<script setup lang="ts">
import {config, dom, library} from "@fortawesome/fontawesome-svg-core";
import {fab} from '@fortawesome/free-brands-svg-icons';
import {far} from '@fortawesome/free-regular-svg-icons';
import {fas} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";

config.autoAddCss = false; // prevent inlining mess with css in html head

library.add(fas, fab, far);
dom.watch();
</script>

<template>
</template>

<style>   // <== Important, should be not scoped!
@import '@fortawesome/fontawesome-svg-core/styles.css';
</style>

regular way:

import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
<FontAwesomeIcon icon="fa-solid fa-rotate" size="4x"/>

for menu:

const items = computed(() => {
  return <MenuItem[]>[
    {
      label: "Label",
      icon: "fa-solid fa-rotate",
    },

modern way:

<i class="fa-solid fa-maximize fa-4x"/>