Vuetify works dodgy in Nuxt.js project - vue.js

Question

I am facing some weird issue.
Vuetify has limited functionality in my nuxt.js project.
First of all here's my default layout:
<div>
<NavBar />
<Nuxt />
</div>
</template>
And the NavBar component overlays the page.
However the problem disappears if I remove the app prop from <v-app-bar app flat> but then the NavBar won't be always on top of the page.
See screenshots for details:
Default view:
View with margin-top: 100px; on lorem
The code of NavBar components:
<template>
<nav>
<v-app-bar app flat>
<v-app-bar-nav-icon
x-large
class="grey--text"
#click="drawer = !drawer"
/>
<v-spacer />
<v-toolbar-title>
LOGO
</v-toolbar-title>
<v-spacer />
<v-menu offset-y>
<template #activator="{ on, attrs }">
<v-btn text v-bind="attrs" v-on="on">
<!-- <v-icon>expand_more</v-icon> -->
Dropdown menu
</v-btn>
</template>
<v-list>
<v-list-item v-for="contact in contacts" :key="contact.i">
<v-list-item-action>
<a :href="contact.link">
<v-icon>
{{ contact.icon }}
</v-icon>
</a>
</v-list-item-action>
<v-list-item-content>
<a :href="contact.link">
<v-list-item-title>
{{ contact.name }}
</v-list-item-title></a
>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-navigation-drawer v-model="drawer" bottom temporary app>
<v-list>
<v-list-item
v-for="link in links"
:key="link.i"
router
:to="link.route"
#click="refresh"
>
<v-list-item-action>
<v-icon>{{ link.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
<span> {{ link.name }} </span>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</nav>
</template>
<script>
export default {
data() {
return {
drawer: false,
}
},
computed: {
links() {
return this.$store.state.routes
},
contacts() {
return this.$store.state.contacts
},
},
methods: {
refresh() {
if (this.drawer) {
this.drawer = !this.drawer
}
},
},
}
</script>
<style></style>
As you can see the NavBar covers part of the content.
And another problem is that class="mt-5 pt-5" or any other classes about margin or padding doesn't work. class="d-flex" doesn't work too.
And as you can see on the screenshot, there's a class="ml-5 pl-5 d-flex" But there's no margin left, no padding left and the container is not flex.
However
:class="{
'tiny': $vuetify.breakpoint.smAndDown,
'large': $vuetify.breakpoint.mdAndUp,
}"
and
<style>
.tiny {
font-size: 1rem;
color: red;
}
.large {
font-size: 2rem;
color: green;
}
</style>
Does work.
And I am really confused about vuetify in nuxt.js

Answer 1

Erasing and creating a new Nuxt.js project somehow helped with not working vuetify.
About margin:
The issue been solved by including NavBar (the code itself) into a default.vue layout AND nesting components in there.
For some reason it doesn't work well if I nest it this way in the layouts/default.vue:
<NavBar />
<Nuxt />
<Footer />
So the layouts/default.vue looks like this and it does work just fine:
<template>
<v-app dark>
<v-navigation-drawer v-model="drawer" bottom :fixed="fixed" app>
<v-list>
<v-list-item
v-for="route in routes"
:key="route.i"
:to="route.to"
router
exact
#click="refresh"
>
<v-list-item-action>
<v-icon>{{ route.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title v-text="route.title" />
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar :fixed="fixed" app flat>
<v-app-bar-nav-icon #click.stop="drawer = !drawer" />
<v-spacer />
<NuxtLink to="/">LOGO</NuxtLink>
<v-spacer />
<span> +34XX-XXX-XX-XX </span>
<DropdownWithContacts />
</v-app-bar>
<v-main>
<Nuxt /> <!-- the nuxt view -->
</v-main>
<v-spacer></v-spacer>
<Footer />
</v-app>
</template>
<script>
export default {
data() {
return {
drawer: false,
fixed: true,
}
},
computed: {
routes() {
return this.$store.state.menu.routes
},
},
methods: {
refresh() {
if (this.drawer) {
this.drawer = !this.drawer
}
},
},
}
</script>
<style>
/*a normal, unvisited link*/
a:link {
color: green;
}
/*a link the user has visited*/
a:visited {
color: purple;
}
/*a link when the user mouses over it*/
a:hover {
color: yellow;
}
/*a link the moment it is clicked*/
a:active {
color: brown;
}
/* removed underline */
a {
text-decoration: none;
}
</style>
And I am really finding this weird. But I guess this is just the way it works.