【Vuetify】<v-spacer>を使っていて画面の横揺れが発生したら<v-container>の不足を疑おう

はじめに

Vuetifyを使って開発をしていて、
「なぜか画面の横スクロールが発生するな」
と思って調べたときの記録です。

画像でいうと右端の余白です。
こいつのせいでガタガタするので、除去します。

環境

OS: macOS Catalina 10.15.1
Vue: 2.6.10
vuetify: 2.1.0

結論:<v-spacer>には<v-container>が必須

そのまんまです。

何かの変更の際に、誤って<v-container>から<div>に変更してしまったようで、それから横揺れが発生していました。

<div>で囲われている

<template>
  <div>
    <v-row>
      <div></div>
      <v-spacer></v-spacer>
      <div></div>
    </v-row>
  </div>
</template>

<v-container>で囲われている

<template>
  <v-container>
    <v-row>
      <div></div>
      <v-spacer></v-spacer>
      <div></div>
    </v-row>
  </v-container>
</template>

<v-spacer>は<v-contaniner>の横幅を基準にして余白計算を行うので、<div>だと今回のようにはみ出す現象が発生するんですねー

おわりに

最後まで読んで頂きありがとうございました

どなたかの参考になれば幸いです

参考にさせて頂いたサイト（いつもありがとうございます）

• Grid system — Vuetify.js