Nuxtjsでレスポンシブ対応したときのメモ

SSRでスマホの場合、タブレットの場合、PCの場合、、、と要素を出し分けをしたい場合、$vuetify.breakpoint は使えない。 なので、プラグインにこんな関数を書いて使った。 リサイズにも対応してくれる。

inject('isXs', () => {
  if ($vuetify.breakpoint.width === 0) {
    return $ua.isFromSmartphone()
  }
  return $vuetify.breakpoint.xs
})

でもこうすると、ウィンドウサイズをPCなのにスマホサイズにしてると、初回だけワーニングがでる。

[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.

でも、本番では出ないし、動作がおかしくなるわけでもないし、SEO的にも問題はないだろうということで、この方法を採用。