Bug: Incomplete documentation for Nuxt 3 using vue-fontawesome

[Ionaru]

Bug description

Using the steps provided on https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt for Nuxt 3 results in the message "Could not find one or more icon(s)" in the nuxt console. The icon does work eventually but gets rendered after the page is loaded (no SSR), so results in flashing.

Full error: Could not find one or more icon(s) { prefix: 'fas', iconName: 'coffee' } {}
for the code <font-awesome-icon :icon="['fa-solid', 'coffee']" />

This issue was reported a while ago here: FortAwesome/vue-fontawesome#215 and seems to still get regular traffic from people running into the same problem.

The solution @redwarff proposed in FortAwesome/vue-fontawesome#215 (comment) seems to be the best solution, the message in the console is gone and SSR seems to be working correctly for icons. It just needs to be added to the documentation.

The solution, add to nuxt.config.ts:

build: {
    transpile: [
        '@fortawesome/vue-fontawesome'
    ]
},

So the full config for Fontawesome in combination with Nuxt 3 becomes:

export default defineNuxtConfig({
    build: {
        transpile: [
            '@fortawesome/vue-fontawesome'
        ]
    },
    css: [
        '@fortawesome/fontawesome-svg-core/styles.css',
    ],
});

Please modify https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt to include the extra configuration option.

Reproducible test case

N/A

Screenshots

Font Awesome version

FontAwesome 6 and up, vue-fontawesome 3 and up.

Serving

Font Awesome CDN, Self-hosted

Implementation

SVG+JS

Browser and Operating System

All supported operating systems and browsers.

Web bug report checklist

• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

Misc

As a side-note, is there a better place to report issues about the documentation or contribute to it? I couldn't find any repository holding the documentation pages.

[Ionaru]

@talbs @mlwilkerson

Could you share some information about the status of this proposed documentation change?
It's such a waste that developers keep running into the mentioned problem while there is an easy solution available.

[AMRWERY]

hello, i want share when i follow this docs link steps https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt
and make my nuxt config like this:

css: [
    "@fortawesome/fontawesome-svg-core/styles.css",
  ],
  build: {
    transpile: ["@fortawesome/vue-fontawesome"],
  },

i still have same issue

this is font awesome version i have now

"@fortawesome/vue-fontawesome": "^3.0.5",

so any advice please ?