2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.jsでVuetifyを使ってページを作成してたら変に上部のスペースが空いて困った件

Last updated at Posted at 2020-07-31

こんにちは、Yuiです。

今回Vue.jsの案件でVuetifyを使って簡単なサイト制作をしている際に、ページの上部に謎の空白が空いてしまって丸1日悩んだので、その件に関して書きます。

#環境

$ node -v
v12.18.2

$ npm -v
6.14.5

$ vue -V
@vue/cli 4.4.6

UIフレームワークはVuetify2系を使ってます。

#何が起こったか
ホームページの上部に特にcssを使ってないのに謎の空白が空いてしまった。
スクリーンショット 2020-08-01 3.10.29.png

ページの構成としては、ヘッダーとフッターという全ページ共通の部分だけ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><v-main></v-main>を削除。

※そもそも、入れ子構造になりすぎていて汚いので、きちんと考えて書くべきだった。
今までなんとなく書いてたので反省。

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>

#結果
スクリーンショット 2020-08-01 3.29.28.png
レイアウトが整った〜〜〜!

Vuetifyは便利だが、appプロパティがもつ性質をきちんと理解してコードを書いていきたい。
もっと良い書き方はあるはずなので引き続き勉強します。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?