类型上不存在属性“$vuetify”-将 Nuxt.js 与 Vuetify 一起使用时答案

【问题标题】：Property '$vuetify' does not exist on type - when using Nuxt.js with Vuetify类型上不存在属性“$vuetify”-将 Nuxt.js 与 Vuetify 一起使用时
【发布时间】：2021-01-20 18:54:23
【问题描述】：

在我的 Nuxt.js 应用程序中访问 this.$vuetify 时，代码中的特定部分出现此错误。


 ERROR  ERROR in components/equipment/QuickInfoCard.vue:21:20                                                                                                                   19:51:29
TS2339: Property '$vuetify' does not exist on type '{ width(): string; height(): "100%" | "9em"; }'.
    19 |     },
    20 |     height() {
  > 21 |       switch (this.$vuetify.breakpoint.name) {
       |                    ^^^^^^^^
    22 |         case 'sm': return "9em"
    23 |         default: return "100%"
    24 |       }

我已经尝试添加 TS 类型，因为这是建议的解决方案

// tsconfig.json
"compilerOptions: [
    ...
    "types": [
      "@nuxtjs/vuetify", // <<
      "@types/underscore",
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/auth-next"
    ]
    ...
]

【问题讨论】：

文档还说要添加@nuxt/vue-app；不知道这是否会有所作为
很遗憾没有帮助

标签： typescript nuxt.js vuetify.js

【解决方案1】：

请验证您的 nuxt 配置中的 buildModules 中是否包含“@nuxtjs/vuetify”。

接下来，尝试从全局 $nuxt 访问 vuetify，例如： this.$nuxt.vuetify

祝你好运！

【讨论】：