はじめに 現在プロジェクトでNuxt(2系) × Composition API × VeeValidate(3系)で開発をしているのですが その時に少しだけハマったものをメモがてらアウトプットしようと思います。 前提としてフォームのバリデーションにはVeeValidate(3系)を使用しています。 this.$refsにどうアクセスするのか？ 例えば、よく管理系の画面を作る際に、フォーム入力が終わり送信した後で、 フォームを初期化したい時があります。 その際に画面遷移などで次のアクションがあれば問題ないのですが、モーダルを出したり 同じ画面内でアクションを促す場合は、 this.$refs.observer.reset() を実行して初期化する必要が出てくると思います。VueのOption APIなどであれば this.$refsでアクセスできるのですが、Composition APIだとそもそもthisに アクセスできないので別の方法でアクセスする必要があります。 ではどうやればアクセスできるのか？ それは以下のようにすることでアクセスすることができます。 バリデーション部分はref="observer"を指定 <ValidationObserver ref="observer"> Composition API部分ではsetup関数内に、refと記述し observer.value.reset()を実行することで、Option APIの this.$refs.observer.reset()と同様の動作をすることができる。 setup() { const observer = ref(null) const init = () => { observer.value.reset() } return { observer, init } }, まとめ Composition APIでthisの呪縛などが無くなり、Vueも処理をまとめやすくなりましたが、 こういった細かい所には注意が必要ですね。中々記事も少ないのでアウトプットしました〜！ 誰かの助けになれば幸いです！参考になった方はLGTM押してくれると嬉しいです！

NuxtJSのSSRモードでAdsenseが発行するタグを貼ると以下のエラーが発生した。 [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とクライアントサイドでレンダリングされたDOMに差異があるという警告で開発モード（yarn dev等）で起動したときのみ発生する。本番サーバーを起動（yarn start等）したときは以下のエラーが発生し、DOMが表示されなくなる（つまりなにもできないバグが発生） DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.appendChild (https://my.domain/_nuxt/vendors/commons.3cf3456.js:5196:8) ハイドレーションがなんぞやという人はこちら↓ https://ssr.vuejs.org/guide/hydration.html#client-side-hydration 時間ない人用和訳 ハイドレーションとは、Vueがサーバーから送信された静的HTMLを引き継ぎ、クライアント側のデータ変更に対応できる動的DOMに変換するクライアント側のプロセスを指します。 どのDOMが悪さしているか調べる devツールのConsoleタブで該当のエラーを調べ、hydrateのリンクをクリックする。 ブレークポイントを貼り、リロードすると止まるのでvnodeあたりを見るとエラーが発生した箇所がわかりやすい 対処法 client-onlyを使う クライアントのみでレンダリングするためのコンポーネント。 <client-only></client-only> no-ssrを使う サーバーサイドレンダリングの対象からコンポーネントを除外するためのコンポーネント。 <no-ssr></no-ssr> 無効なHTMLを直す tableタグ内にtbodyがないようなことはよく発生するらしいので、変なHTMLがあれば直す おわりに Adsenseで発生したが、毎回発生するわけじゃないので結構厄介だった。さらにこの方法でもAdsenseが悪さしてるって特定できなかったので、同じように困ってる人がいれば検索で引っ掛かれば良いなと思っている。もしかしたらNuxtのAdsenseライブラリを使えば起きないかもしれない。。（個人的には使いたくない。。）vuetifyのDatePickerでも同様の事象が起きるらしいので同様の対処すればよいのかと