给Vite项目添加Vuetify时出现注入布局找不到错误

错误原因 #

Vuetify的布局组件（如v-app-bar）依赖v-app根组件提供的布局上下文注入，你的代码中缺少v-app包裹，导致子组件无法获取必要的布局依赖，触发该错误。

修复步骤 #

修改App.vue，用v-app包裹所有页面内容：

<template>
  <v-app>
    <TheNavigation></TheNavigation>
    <div class="container">
      <router-view></router-view>
    </div>
  </v-app>
</template>

<script setup>
import TheNavigation from './components/TheNavigation.vue';
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>

可选补充（解决图标问题） #

你的导航组件用到了mdi-menu图标，若尚未安装Material Icons，执行以下命令安装：

npm install @mdi/font

并在main.js中添加导入：

import '@mdi/font/css/materialdesignicons.css'

修改完成后重新启动项目，错误即可消除。

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