9

I am using vue-fontawesome with Nuxt 3 as described here and I'm seeing this weird behaviour. Say I have something like this

<a href="https://example.com"><font-awesome-icon icon="fa-brands fa-twitter" />Example</a>

if I run the dev server, everything is fine, but if I run generate and serve the output through a static HTTP server, I get "Example" printed twice. If I wrap the text in a tag, I get the tag and text twice (i.e. <span>Example</span><span>Example</span>). Weirdly enough, though, the generated HTML does not contain the repetition, so I suspect something weird is going on in the browser.

You can grab the generated site from here as a reproducible test case. https://andreafranceschini.org/files/afnuxt.tgz

I hear vue-fontawesome isn't super happy with SSR and static generation, but I also see others using it just fine in the same way so I wonder what I may be doing wrong?

EDIT I also posted this as a "bug" here.

EDIT 2 A workaround is to enclose the icon alone in something else, like a span tag.

Morpheu5
  • 2,610
  • 6
  • 39
  • 72

2 Answers2

5

I found a workaround, which is to enclose the icon alone in something else, like a span tag.

Morpheu5
  • 2,610
  • 6
  • 39
  • 72
2

Try adding the following to your nuxt.config.ts file:

build: {
  transpile: [
    '@fortawesome/fontawesome-svg-core',
    '@fortawesome/free-solid-svg-icons',
    '@fortawesome/free-regular-svg-icons',
    '@fortawesome/free-brands-svg-icons',
    '@fortawesome/vue-fontawesome'
  ]
}

(Adjust the specific icon package imports as required.)

I can only find this solution mentioned online in two places [1] [2], neither of which mention this duplication issue. It is also notably absent from all official documentation.

That said, for me at least, this fixes both this issue and the issue of Could not find one or more icon(s) error messages in the console.

Callum Watkins
  • 2,844
  • 4
  • 29
  • 49