I am facing an issue with my Vue.JS project setup. I want the App.vue to occupy the entire page and have different routes displayed within App.vue using router-view.
But, when I try to add a margin to the content of my Game component, the margin seems to affect the App component rather than the Game component.
Below are my two ".vue" files:
App.vue
<template>
<div id="app" class="bg-gray-500 h-full">
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'App'
}
</script>
<style>
</style>
Game.vue
<template>
<div>
<div id="game">
<div class="bg-white rounded-lg p-6 w-1/2" style="margin-top:10px">
<h1>Hi</h1>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Game'
}
</script>
<style>
#game{
margin : -0px !important;
height: 100vh;
top:0;
background-color:red
}
</style>
The issue is with the small white bar at the top, which should not be there. Instead, the white card should have a margin-top of 10pxhttps://i.sstatic.net/zgIO6.png
EDIT (main.js file):
import Vue from 'vue'
import App from './App.vue'
import '@/assets/css/tailwind.css'
import VueCookies from 'vue-cookies'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueCookies)
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
routes: [
{path: '/home', component: require('./components/Home.vue').default},
{path: '/', component:require('./components/Game.vue').default}
]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app');