I have been delving into Vue JS and working on constructing an app. I've implemented vue router, however, it seems to be causing the content within the routed component to display with excessive margins/padding. I've attempted various solutions such as wrapping in v-app (utilizing Vuetify for UI), adjusting CSS properties, etc.
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>