How can I include Fontawesome 6 in Nuxt 3 project? - vuejs3

Question

first of all my configuration:
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
// if you want to use static HTML generation (SSG)
target: 'static',
// if you want to use server-side rendering (SSR)
ssr: true,
css: [
'assets/scss/main.css',
'assets/scss/header.css',
'#fortawesome/fontawesome-svg-core/styles.css'
],
build: {
transpile: [
'#fortawesome/vue-fontawesome',
'#fortawesome/fontawesome-svg-core',
'#fortawesome/pro-solid-svg-icons',
'#fortawesome/pro-regular-svg-icons',
'#fortawesome/free-brands-svg-icons'
]
}
})
/plugins/fontawesome.js
import { defineNuxtPlugin } from '#app';
/** Fontawesome for Nuxt 3
* https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt
*
*/
// import the fontawesome core
import { library, config } from '#fortawesome/fontawesome-svg-core'
// import font awesome icon component
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
// import specific icons
import { fas } from '#fortawesome/free-solid-svg-icons'
// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false
export default defineNuxtPlugin((nuxtApp) => {
console.log('[Plugin]', 'Font Awesome')
// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas);
nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})
<template>
<header class="header">
<Logo />
coffee <font-awesome-icon icon="fas coffee" />
flag <font-awesome-icon icon="fas fa-flag" />
search <font-awesome-icon icon="fas fa-magnifying-glass" />
search 2 <font-awesome-icon icon="fa-solid fa-magnifying-glass" />
<nav>
<nuxt-link :to="{ path: '/' }">
Home
</nuxt-link>
<nuxt-link :to="{ path: '/getting-started' }">
Getting Started
</nuxt-link>
<nuxt-link :to="{ path: '/faq' }">
FAQ
</nuxt-link>
<nuxt-link :to="{ path: '/search' }">
<font-awesome-icon icon="fas fa-magnifying-glass" />
</nuxt-link>
</nav>
</header>
</template>
Problem
When I start npx nuxi dev and look at the page via localhost, the icons appear for 1 second and then are no longer visible. I have been searching for a solution for quite some time because I could not find an error right away.
Warning - console
[Vue warn]: Hydration node mismatch:
- Client vnode: font-awesome-icon
- Server rendered DOM: <svg class=​"svg-inline--fa fa-magnifying-glass" style aria-hidden=​"true" focusable=​"false" data-prefix=​"fas" data-icon=​"magnifying-glass" role=​"img" xmlns=​"http:​/​/​www.w3.org/​2000/​svg" viewBox=​"0 0 512 512">​…​</svg>​
at <Navigation>
at <Default >
at <AsyncComponentWrapper >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at <Transition name="layout" mode="out-in" >
at <Anonymous>
at <App key=1 >
at <NuxtRoot>

Answer 1

You can wrap the component in a <client-only>, so it only renders client-side.
<client-only>
<font-awesome-icon icon="fas fa-flag" />
</client-only>