CODEWITHSUNDEEP
htmlcssvue.jsvue-componentvuetify.js
PJ.
PJ.

Reputation: 13

How can I remove the space under v-app-bar in vuejs?

How can I remove the space under v-app-bar?

the header part User_Header.vue

<template>
<v-app id="user_header">
    <v-app-bar app color="#8a0303" dark>
        <h1>this is app bar</h1>
    </v-app-bar>
</v-app>

</template>

<script>
export default {
    name: "User_Header"
}
</script>

<style>
</style>

the part that i call header User_Dashboard.vue

<template>
  <v-app id="user_dashboard">
      <User_Header />
      <div>
          <h1>Test</h1>
      </div>
 </v-app>
</template>

<script>
import User_Header from '../components/layout/User_Header'
export default {
    name: "User_Dashboard",
    components: {
        User_Header
    }
}
</script>

<style>
</style>

there is the big gap in my result

result

Upvotes: 1

Views: 1193

Answers (1)

Daniel Davies
Daniel Davies

Reputation: 158

I found this on the Vuetify documentation, you are rendering v-app twice when it should only be rendered once in your application.

Instead of wrapping your header in <v-app> tags replace them with div tags.

<template>
<div id="user_header">
    <v-app-bar app color="#8a0303" dark>
        <h1>this is app bar</h1>
    </v-app-bar>
</div>
</template>

Upvotes: 2

Related Questions