Nuxt 3 - Content duplicated by using font-awesome-icon about vue-fontawesome HOT 17 OPEN

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.

from vue-fontawesome.

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

from vue-fontawesome.

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

from vue-fontawesome.

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)

from vue-fontawesome.

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

from vue-fontawesome.

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 ? 😔

from vue-fontawesome.

It's my dependencies

from vue-fontawesome.

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.

from vue-fontawesome.

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.. :/

from vue-fontawesome.

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

from vue-fontawesome.

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).

from vue-fontawesome.

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.

from vue-fontawesome.

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"
}

from vue-fontawesome.

@jasonlundien Anything new on this issue ?

from vue-fontawesome.

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)

from vue-fontawesome.

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

from vue-fontawesome.