1

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"
    ]
    ...
]
xetra11
  • 7,671
  • 14
  • 84
  • 159

4 Answers4

0

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!

Agustin Lombardo
  • 29
  • 5
0

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!

sandCastleKing
  • 1
0

enter code hereA better solution that i have found is just adding a "vuetify" in the tsconfig.ts file under "types": [...]

Note : i'm using typescript in my implementation.

Sumeet Patel
  • 1
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 15 '23 at 06:21
0

You can solve it in your tsconfig.json by:

  • including "node_modules/@nuxtjs" in your "typeRoots": [...]
  • including "vuetify" in your "types": [...].

The reason why is that typeRoots contains all the directories TypeScript looks for to get its type definitions, and types is the name of the library TypeScript looks for individually.

References:

Fabio Martins
  • 131
  • 11