Vuetify3：如何让v-navigation-drawer占左上角全空间，v-app-bar靠其右侧？

要实现类似Vuetify官网的「侧边栏占满左侧垂直空间，导航栏从侧边栏右侧开始布局」的效果，核心是调整组件渲染顺序和属性配置，不需要额外自定义CSS，具体步骤如下：

关键实现要点 #

1. 调整组件渲染顺序：把v-navigation-drawer放在v-app-bar之前。Vuetify会按照组件渲染顺序处理app属性的布局优先级，先渲染的侧边栏会占据左上角垂直空间，后渲染的导航栏会自动适配剩余右侧区域。
2. 配置侧边栏属性：给v-navigation-drawer添加app属性，同时设置permanent（或根据需求用persistent/temporary）、height="100vh"确保占满视口垂直高度，可通过width指定固定宽度。
3. 配置导航栏属性：给v-app-bar添加app属性即可，它会自动填充侧边栏右侧的水平空间。

完整代码示例 #

<template>
  <v-app>
    <!-- 侧边栏：先渲染，占据左侧垂直空间 -->
    <v-navigation-drawer
      app
      permanent
      width="256"
      height="100vh"
      bg-color="grey-lighten-5"
    >
      <v-list>
        <v-list-item title="首页" />
        <v-list-item title="组件文档" />
        <v-list-item title="API参考" />
      </v-list>
    </v-navigation-drawer>

    <!-- 导航栏：自动适配侧边栏右侧空间 -->
    <v-app-bar app elevation="1">
      <v-app-bar-nav-icon @click="drawer = !drawer" />
      <v-toolbar-title>我的Vuetify应用</v-toolbar-title>
      <v-spacer />
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
    </v-app-bar>

    <!-- 主内容区域 -->
    <v-main>
      <v-container fluid>
        <h1>主内容展示区</h1>
        <p>这里是页面的核心内容</p>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
const drawer = ref(false)
</script>

补充说明 #

• 若需要响应式折叠效果（移动端自动收起侧边栏），可将permanent替换为persistent，配合导航栏的菜单按钮控制展开/收起状态。
• 侧边栏的height="100vh"保证其从顶部到底部占满整个视口，和Vuetify官网的布局逻辑完全一致。

内容的提问来源于stack exchange，提问作者spinkus