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

user_9063088 0
Viewed 894

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.

nuxt.js vuetify.js vue.js themes
1 Answers

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.

user_48707850
Related