Nuxt.jsでプラグインを入れたらエラーが... Nuxt.js 2.9.0から<no-ssr>の代わりに<client-only>を使おう

Nuxt.jsのバージョンは2.9.2
templateはpugで書いています。

スライダーを使いたくてvue-awesome-swiperをインストールして、nuxt.config.jsでプラグインを使えるように修正をして、いざスライダーを書いたんですよ。。（vue-awesome-swiperの使い方は>>こちら<<を）

index.vue

<template lang="pug">
        section.section.feature
            swiper(:options="swiperOption")
                swiper-slide スライド１
                swiper-slide スライド２
                swiper-slide スライド３
                swiper-slide スライド4
                swiper-slide スライド5
                swiper-slide スライド6
</template>

したら、以下のようなエラーが出てしまいました。

[error] [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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
(訳）
クライアント側でレンダリングされた仮想DOMツリーがサーバーでレンダリングされたコンテンツと一致しません。
これは、<p>内にブロックレベルの要素をネストしたり、<tbody>が欠落しているなど、
不適切なHTMLマークアップが原因である可能性があります。
ハイドレーションをベイルするか、完全なクライアント側レンダリングを実行してね。

解決しよう1 ssrをtrueにしたら？

プラグインを設定する時に書いたssr: falseが気になったので

nuxt.config.js

plugins: [{ src: '~plugins/vue-awesome-swiper', ssr: false }],

もしやと取ってみたりtrueにしてみたら

window is not defined

と怒られたので、一旦ssr: falseは戻します。

解決しよう2 問題の部分をno-ssrで囲んだら？

<no-ssr>を使ってサーバーサイドレンダリングの対象からコンポーネントを除外してみました。

index.vue

<template lang="pug">
        section.section.feature
            no-ssr
                swiper(:options="swiperOption")
                    swiper-slide スライド１
                    swiper-slide スライド２
                    swiper-slide スライド３
                    swiper-slide スライド4
                    swiper-slide スライド5
                    swiper-slide スライド6
</template>

エラーが消えた！！

ただし、代わりに以下のような注意文言が現れました。

[warn] <no-ssr> has been deprecated and will be removed in Nuxt 3, please use <client-only> instead
(訳）
<no-ssr>はNuxt 3で廃止され、削除されます。代わりに<client-only>を使用してください

↓↓↓Nuxt.js v2.9.0で追加されたようですね。↓↓↓

• https://github.com/nuxt/nuxt.js/releases/tag/v2.9.0
• feat(vue-app): add ＜client-only＞ alias for ＜no-ssr＞#5941 · nuxt/nuxt.js · GitHub

わかりました。私は先生の言うことをよく聞くいい子なので

解決しよう３ no-ssrのかわりにclient-onlyを使おう

index.vue

<template lang="pug">
        section.section.feature
            client-only
                swiper(:options="swiperOption")
                    swiper-slide スライド１
                    swiper-slide スライド２
                    swiper-slide スライド３
                    swiper-slide スライド4
                    swiper-slide スライド5
                    swiper-slide スライド6
</template>

これで無事エラーを解消出来ました。
めでたしめでたし。