Vue JS Router showing in middle of page

Question

So I'm learning Vue JS and started building an app. I have vue router but it seems that when I use it, it makes the content have a large margin/padding around the entire routed component. I've tried wrapping in v-app (I'm using Vuetify for UI) separately, changing CSS, etc.

If you look at the picture, you can see the tip of the header at the very top, barely visible. I want these to be close together. The footer is automatically placed the same distance further down the page. It seems like the page is trying to keep a certain height (yes, I've tried changing it)

Home.vue

 <template lang="html">
  <v-app>
    <appHeader></appHeader>
    <div class="">
      Home
    </div>
    <appFooter></appFooter>
  </v-app>
</template>

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
</script>

<style>
  html, body, #app {
    margin: 0;
    padding: 0;
    background: #ccc;
  }
</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'

Vue.use(Router)

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Home',
          component: Home
        }
      ]
    })

Header.vue

<template lang="html">
  <v-app>
    <v-content>
      <v-container>

        <v-toolbar dark>
          <v-toolbar-title>
            <v-btn
              block
              flat
              large
              fab
              color="blue"
              >TITLE</v-btn>
          </v-toolbar-title>
          <v-spacer></v-spacer>
          <!-- Guest Tabs-->
          <v-toolbar-items v-if="!isLogged">
            <v-btn
              flat
              small
              color="yellow"
              :key="tab"
              v-for="tab in guestTabs"
              >
              {{ tab }}
            </v-btn>
          </v-toolbar-items>
          <!-- User Tabs-->
          <v-toolbar-items v-else>
            <v-btn
              flat
              small
              color="yellow"
              :key="tab"
              v-for="tab in userTabs"
              >
              {{ tab }}
            </v-btn>
          </v-toolbar-items>
        </v-toolbar>
      </v-container>

    </v-content>
  </v-app>
</template>

Kendall Adkins Kendall Adkins · Accepted Answer · 2018-05-05T17:26:35

Figured it out, ha. For others who run into this. You only use once. Around your router-view and not around the rest of the components. (This occurs when using Vuetify.

Vue JS Router showing in middle of page

1 Answers