The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

【Nuxt.js】Nuxt.jsでFont Awesomeを使うと「The client-side rendered virtual DOM tree is not matching server-rendered content.」というエラーが出る【Font Awesome】

【Nuxt.js】Nuxt.jsでFont Awesomeを使うと「The client-side rendered virtual DOM tree is not matching server-rendered content.」というエラーが出る【Font Awesome】

f:id:duo-taro100:20160218004611p:plain


タイトルの通りですが、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>

これでエラーは起きなくなりました。
以上です。