Make vuetify app bar items align with <v-container> body content

问题

The stock app bar component aligns items hard left, and if using the v-spacer component will the push items to the hard right.

I have tried wrapping the button items with v-container inside the v-app-bar but it breaks the layout once other components are added.

Ideally, the button on the left would align with hello and likewise with the buttons on the right, they should align with the right side of the v-container of the body.

I tried wrapping v-app-bar with v-container:

This is essentially the layout I want but obviously not with the background colour pushed in, it should fill out the width like in the first image.

Is there a native way to do this or will I need to get creative?

<template>
    <v-container>
        <v-app-bar
                color="indigo accent-4"
                dense
                flat
                dark
        >
            <v-btn icon>
                <v-icon>mdi-home-outline</v-icon>
            </v-btn>
            <v-divider inset vertical></v-divider>

            <v-btn text :key="item.id" v-for="item in items" v-text="item.text"></v-btn>
            <v-spacer></v-spacer>
            <v-btn text v-text="'Sign In'"></v-btn>
            <v-btn text v-text="'Register'"></v-btn>
        </v-app-bar>
    </v-container>
</template>

Similar question but no answers. Problem with placing v-app-bar content in container?

回答1:

Found a workaround in the interim, not sure how clean it is:

My solution looks like so:

The colors show the nav bar width adjusted to match the body. The code looks like so:

<template>
    <v-sheet color="red">
        <v-container class="pa-0">
            <v-app-bar
                    dense
                    flat
                    color="blue accent-4"
            >
                <v-btn icon>
                    <v-icon>mdi-home-outline</v-icon>
                </v-btn>
                <v-divider inset vertical></v-divider>

                <v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
                <v-spacer></v-spacer>
                <v-btn text v-text="'Sign In'"></v-btn>
                <v-btn text v-text="'Register'"></v-btn>
            </v-app-bar>
        </v-container>
    </v-sheet>
</template>

来源：https://stackoverflow.com/questions/64951020/make-vuetify-app-bar-items-align-with-v-container-body-content