【Nuxt.js】Nuxt.jsでFont Awesomeを使うと「The client-side rendered virtual DOM tree is not matching server-rendered content.」というエラーが出る【Font Awesome】
タイトルの通りですが、Nuxt.js内でアイコンを使うために、Font Awesomeを導入しましたが、アイコンを追加した箇所でエラーが発生したので解決方法を記載します。ただし、エラーは出なくなりますが、最善策かどうかはわかりません。
※Nuxt.jsのアプリケーション内でFont Awesomeを使用する方法についてはこちら
www.sky-limit-future.com
例えば以下のようなコンポーネントを作成したとします。
<template>
<div class="calc-area">
<span class="box-title"><i class="fas fa-calculator"></i> 計算結果</span>
<p>100円</p>
</div>
</template>上記のテンプレート内では、「計算結果」という文字の前にアイコンを付与しています。
<i class="fas fa-calculator"></i>
このまま使用すると、以下のようなエラーがコンソール上に出ていました。
アプリは問題なく動きます。
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside
, or missing
. Bailing hydration and performing full client-side render.調べたところ、no-ssrタグ を使うと問題なさそうでした。
github.com
<no-ssr><i class="fas fa-calculator"></i></no-ssr>これでエラーは起きなくなりました。
以上です。