如何在Vue的setup函数中访问$vuetify实例？

开发者阿泽

2026-8-17

在Vue 3的setup函数和组合式函数中访问$vuetify及全局对象

setup函数中访问$vuetify

在Vue 3的setup函数里不能直接像Options API那样使用$vuetify，因为setup执行时组件实例还未完全初始化。你可以通过两种方式获取：

方式1：使用Vuetify官方提供的`useVuetify`（推荐）

这是Vuetify 3专为组合式API设计的方式，直接调用即可拿到Vuetify实例：

import { useVuetify } from 'vuetify'

export default {
  setup() {
    const vuetify = useVuetify()
    const isDesktop = vuetify.breakpoints.mdAndUp
    return { isDesktop }
  }
}

方式2：通过`getCurrentInstance`获取全局属性

如果是自定义全局对象，或者需要兼容特殊场景，可以用Vue的getCurrentInstance获取应用上下文里的全局属性，但这种方式更适合库开发者，应用代码优先用上面的方法：

import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const instance = getCurrentInstance()
    const vuetify = instance.appContext.config.globalProperties.$vuetify
    const isDesktop = vuetify.breakpoints.mdAndUp
    return { isDesktop }
  }
}

组合式函数（Composables）中访问$vuetify

组合式函数可以直接调用useVuetify，和组件的setup逻辑一致，非常方便复用：

比如创建一个复用的断点判断组合式函数：

// composables/useBreakpoint.js
import { useVuetify } from 'vuetify'

export function useBreakpoint() {
  const vuetify = useVuetify()
  return {
    isDesktop: vuetify.breakpoints.mdAndUp,
    isMobile: vuetify.breakpoints.smOnly
  }
}

然后在组件中使用：

import { useBreakpoint } from '@/composables/useBreakpoint'

export default {
  setup() {
    const { isDesktop } = useBreakpoint()
    return { isDesktop }
  }
}