Nuxt 3: Hydration mismatch when using SSR

Describe the bug When using Nuxt 3 with the <font-awesome-icon> component while using SSR it causes a hydration node mismatch.

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon);

Error:

[Vue warn]: Hydration node mismatch:
- Client vnode: svg 
- Server rendered DOM: <!---->  
  at <FontAwesomeIcon icon= Array(2)0: "fal"1: "box-open"length: 2[[Prototype]]: Array(0)at: ƒ at()concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()findLast: ƒ findLast()findLastIndex: ƒ findLastIndex()flat: ƒ flat()flatMap: ƒ flatMap()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {at: true, copyWithin: true, entries: true, fill: true, find: true, …}[[Prototype]]: Object class="fa-xl text-white" aria-hidden="true" > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/" routeProps= Object pageKey="/" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=1 > 
  at <NuxtRoot>
(anonymous) @ instrument.ts:123

Expected behavior Using the component should not cause a node mismatch.

Desktop (please complete the following information):

• Browser Chrome
• Version 104.0.5112.102

Additional context Wrapping the <font-awesome-icon> component with <client-only> temporary fixes this issue.

Package.json

    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-brands-svg-icons": "^6.1.2",
    "@fortawesome/pro-light-svg-icons": "^6.1.2",
    "@fortawesome/pro-regular-svg-icons": "^6.1.2",
    "@fortawesome/pro-solid-svg-icons": "^6.1.2",
    "@fortawesome/pro-thin-svg-icons": "^6.1.2",
    "@fortawesome/vue-fontawesome": "^3.0.1",
    "nuxt": "^3.0.0-rc.8",
    "vue": "^3.2.37",

[genu]

As a workaround, you can force a icons to render client side only by wrapping it in another component. When this issue is fixed, you can just remove the <ClientOnly> wrapper:

<ClientOnly>
  <FaIcon v-bind="$attrs" />
</ClientOnly>

[robmadole]

We’ll take a look when we get a chance.