Nuxt.js with Vuetify: Cannot read property '$vuetify' of undefined

Question

I'm using Vuetify themes in my application and trying to reference the primary color within my light theme from another file in my project but getting the following error:

TypeError: Cannot read property '$vuetify' of undefined

How I define vuetify in my nuxt.config.js file:

buildModules: [
    '@nuxtjs/vuetify',
  ],
...
...
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,
        },
      },
    },
  },

How I'm referencing it in a .js file elsewhere:

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

In the same file, I reference $vuetify in my app bar like so:

:extended="$vuetify.breakpoint.lgAndUp"

and I have no issues whatsoever. I've tried console.logging the $vuetify object below where I try calling the theme, and it logs 'undefined'

I'm curious what other configurations am I missing in my nuxt.config.js file to allow me to reference the themeing elsewhere in my app. I've included everything that the documentation says to implement for nuxt.js apps.

I think you should use inject and call it like $vuetify.theme... or have the app global property passed to your js file as a parameter which you can then access it with app.$vuetify.theme... — Ambassel

Kapcash Kapcash · Accepted Answer · 2021-06-17T15:42:38

We're missing context here but I'm pretty sure it's because you try to call it on a wrong place.

TypeError: Cannot read property '$vuetify' of undefined

This means it tries to run undefined.$vuetify, so this doesn't exists. this should refer to a Vue context, which only exists within a vue component code or plugin, not in every javascript file.

You might want to move your code line to a place you can have access to the Vue app context, otherwise $vuetify just doesn't exist. It is not globally accessible.

Nuxt.js with Vuetify: Cannot read property '$vuetify' of undefined

1 Answers