Vuetify2迁移至Vuetify3报错：Cannot read properties of undefined (reading 'lgAndUp')

1. Vuetify3 已移除全局 $vuetify 对象：Vue2+Vuetify2 中全局挂载的 $vuetify 在 Vuetify3 版本里被废弃，无法再通过模板中的 $vuetify.breakpoint 访问断点信息。
2. App.vue 存在无效导入：import vuetify from "vuetify"; 是错误写法，Vuetify3 不需要这种导入方式，该语句不仅无效，还会导致你打印的 vuetify 变量为 undefined。

步骤1：删除 App.vue 中的无效导入 #

直接移除 App.vue 里的这行错误代码：

import vuetify from "vuetify";

步骤2：改用 Vuetify3 的断点 API #

在 Vue3+Vuetify3 中，需通过 useBreakpoint 组合式函数获取断点状态：

1. 在 App.vue 的 script 部分导入并使用该函数：

<script setup>
import { useBreakpoint } from 'vuetify'
import { useStore } from 'vuex' // 按你的状态管理工具调整，比如 Pinia 就用 usePinia

const usersStore = useStore()
const breakpoint = useBreakpoint()
</script>

2. 修改模板中的断点绑定逻辑：

<v-app-bar
  v-if="usersStore.authUser"
  :clipped-left="breakpoint.lgAndUp"
  color="primary"
  dark
  flat
  app
  fixed
>

额外验证 #

你的 main.js 中 Vuetify 实例的创建和注册逻辑是正确的，无需修改。

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