How to center v-app-bar and v-system-bar in web built with vuetify

Question

Environment: Nuxt + Vue 3.x + Vuetify 3.x

Below is my web page and pages/index.vue

<script setup lang="ts">

</script>

<template>
    <v-app style="width: 800px;margin: auto;" class="border-red " >

    <v-system-bar style="width: 800px;margin: auto;">System bar</v-system-bar>
    <v-app-bar  class="border-blue " style="width: 800px;margin: auto;">
      App Bar <v-app-bar-title>APP TITLE</v-app-bar-title>
    </v-app-bar>
    <v-main>
      <v-container >
        <h1>HELLO MAIN</h1>
      </v-container>

    </v-main>
    <v-footer>
      FOOTER
    </v-footer>
  </v-app>

</template>

<style scoped>
.border-red {
  border: 5px solid red;
}

.border-blue {
  border: 5px solid blue;
}
</style>

I want to know how to center the system bar and app bar just like v-main and v-footer.

Answer 1

I think you are looking for v-layout. Just wrap your content with it.

  <v-layout>
    <v-system-bar>System bar</v-system-bar>
    <v-app-bar
      class="border-blue"
      style="width: 800px; margin: auto"
    >
      App Bar <v-app-bar-title>APP TITLE</v-app-bar-title>
    </v-app-bar>
    <v-main>
      <v-container>
        <h1>HELLO MAIN</h1>
      </v-container>
    </v-main>
    <v-footer app style="border: 5px solid green"> FOOTER </v-footer>
  </v-layout>

Playground

Docs