Nuxt.js搭配Vuetify时报Cannot read property '$vuetify' of undefined如何解决

问题根本原因 #

$vuetify 是Vue框架注入到组件实例上的全局属性，只有在Vue组件的正确上下文中通过this才能访问，你遇到的报错是因为调用this.$vuetify的代码所在的作用域没有绑定组件实例，导致this指向为undefined。

分场景解决方案 #

场景1：在Vue组件内部调用时出现报错

• 检查调用代码的上下文是否绑定了正确的组件实例：不要在箭头函数、未绑定实例的普通函数里用this访问实例属性，这类函数的this不会指向组件实例。错误示例如下：

// 错误写法1：箭头函数继承外层this，不指向组件实例
setTimeout(() => {
  this.$vuetify.theme.themes.light.primary = '#ffffff'
}, 1000)
// 错误写法2：普通函数默认this指向window/undefined
setTimeout(function() {
  this.$vuetify.theme.themes.light.primary = '#ffffff'
}, 1000)

• 正确写法：提前保存实例引用，或者使用bind绑定this

// 写法1：提前保存实例指向
const vm = this
setTimeout(function() {
  vm.$vuetify.theme.themes.light.primary = '#ffffff'
}, 1000)
// 写法2：用bind绑定this指向组件实例
setTimeout(function() {
  this.$vuetify.theme.themes.light.primary = '#ffffff'
}.bind(this), 1000)

场景2：在独立的.js工具文件中调用

独立JS文件没有默认绑定Vue组件实例，可选两种方案处理：

• 方案1：调用工具方法时主动传入当前组件的$vuetify实例
  比如工具文件utils/theme.js：

export function updatePrimaryColor(vuetifyInstance, newColor) {
  vuetifyInstance.theme.themes.light.primary = newColor
}

在组件中调用时：

import { updatePrimaryColor } from '~/utils/theme.js'

// 在组件方法内调用，传入当前实例的$vuetify
updatePrimaryColor(this.$vuetify, '#ffffff')

• 方案2：抽离独立的Vuetify实例全局复用

1. 新建plugins/vuetify.js文件，写入完整配置：

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    dark: false,
    themes: {
      light: {
        primary: '#000000',
        accent: '#000000',
        secondary: '#000000',
        info: colors.teal.lighten1,
        warning: colors.amber.base,
        error: colors.deepOrange.accent4,
        success: colors.green.accent3,
      },
    },
  }
})

2. 修改nuxt.config.js的vuetify配置，指定自定义实例路径：

vuetify: {
  pluginPath: '~/plugins/vuetify.js'
},

3. 之后任意JS文件都可以直接引入实例修改配置：

import vuetify from '~/plugins/vuetify.js'

vuetify.theme.themes.light.primary = '#ffffff'

Nuxt3适配注意 #

如果是Nuxt3环境，需要通过useNuxtApp钩子获取vuetify实例：

const { $vuetify } = useNuxtApp()
$vuetify.theme.themes.light.primary = '#ffffff'

内容的提问来源于stack exchange，提问作者Jet.B.Pope