안녕하세요, 유이 입니다.

이번 Vue.js의 안건으로 Vuetify를 사용해 간단한 사이트 제작을 하고 있을 때, 페이지의 상부에 수수께끼의 공백이 비어 버려 통일 하루 고민했으므로, 그 건에 관해 씁니다.

환경

$ node -v
v12.18.2

$ npm -v
6.14.5

$ vue -V
@vue/cli 4.4.6

UI 프레임워크는 Vuetify2 시스템을 사용합니다.

무슨 일이 있었는지

홈페이지 상단에 특히 css를 사용하지 않았는데 수수께끼의 공백이 비어 버렸다.


페이지의 구성으로는 헤더와 바닥글이라는 전체 페이지 공통 부분만 App.vue에 기재되어 있고, YouTube 삽입 부분은 Home.vue에 기재되어 있었습니다.

작성한 코드는 다음과 같습니다.

App.vue

<template>
  <v-app>
    <v-app-bar app color="primary" dark>   
    </v-app-bar>
    //この辺は省略
    <v-content>
      <router-view/>
    </v-content>
    //この辺は省略
  </v-app>
</template> 

Home.vue

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          //ここにYouTubeの動画部分のコンポーネントをはさむ
        </v-row>
      </v-container>
　　　　　//この辺は省略
    </v-main>
  </v-app>
</template>

해결책

분명히 개발자 도구에서 코드를 보면 Vuetify의 app 속성이 가진 성질에 따라 padding을 끼워 버린 것 같습니다. <v-content></v-content>
※ 원래, 중첩 구조가 너무 많아 더럽기 때문에 제대로 생각하고 써야했다.
지금까지 왠지 쓰고 있었기 때문에 반성.

App.vue

<template>
  <v-app>
    <v-app-bar app color="primary" dark>   
    </v-app-bar>
    //この辺は省略
    <router-view/>
    //この辺は省略
  </v-app>
</template> 

Home.vue

<template>
  <v-app>
    <v-container>
      <v-row>
        //ここにYouTubeの動画部分のコンポーネントをはさむ
      </v-row>
    </v-container>
　　　//この辺は省略
  </v-app>
</template>

결과

레이아웃이 완성된~~~!

Vuetify는 편리하지만, app 프로퍼티가 가지는 성질을 제대로 이해해 코드를 써 가고 싶다.
더 좋은 글은 있을 것이므로 계속 공부합니다.