Vue.js や Nuxt.js で開発していてハマったポイントを雑多にまとめています。（随時追加予定）

props を子コンポーネントにそのまま流したい

具体的な例をあげると、UI コンポーネントをラップしたコンポーネントを作りたい場合などです。

こういうときは、$attrs を使うとよいです。

https://isoppp.com/note/2018-12-16/what-is-vue-attrs/

computed は型アノテーションが必須

明らかに推論できるような場合でも、型アノテーションが必須です。

記述していない場合はエディタがエラーを表示します。

computed: {
  fullName(): string { // 明らかに string を返すが、アノテーションは必須
    return `${firstName} ${lastName}`;
  }
}

正しく Vue コンポーネントを記述しているのに何かエラーになる場合、これが原因のことが多いです。

具体的な例をあげると、「リロードした時だけ動かない。他のページから遷移してきた場合は動く。」のようなケースです。

これは、SSR と CSR に起因しているケースが多いです。

サーバーサイド（クライアントサイド）でしか実行してはいけない関数を実行してしまっていないか確認しましょう。例えば、サーバーサイドで window オブジェクトにアクセスしているとかです。

thead や tbody を書けば直ることがあります。

Vue では、自動的にこれらを補完するため、SSR と CSR で DOM が一致せず、エラーになります。