'Property '$vuetify' does not exist on type - when using Nuxt.js with Vuetify

I have this error for a particular part in the code when accessing this.$vuetify in my Nuxt.js app.


 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 |       }

I already tried to add the TS type since that was a suggested solution

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

Solution 1:^[1]

Please, verify if you have the '@nuxtjs/vuetify' inside of the buildModules in your nuxt config.

Next, try access to vuetify from the global $nuxt, for example: this.$nuxt.vuetify

Good luck!

Solution 2:^[2]

You may have opened your editor in the wrong directory, causing files like your package.json and tsconfig.json to not be found. If using VSCode, the "code ." command needs to be opening the exact project directory, or else this error can occur. Hope this helps!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Agustin Lombardo
Solution 2	sandCastleKing

'Property '$vuetify' does not exist on type - when using Nuxt.js with Vuetify

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]