【Vuetify】를 사용하고 있고 화면의 흔들림이 발생하면 부족을 의심한다

소개

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