CODEWITHSUNDEEP
vue.jsnuxt.jsthemesvuetify.js
Jet.B.Pope
Jet.B.Pope

Reputation: 760

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

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.

Upvotes: 2

Views: 2253

Answers (1)

Kapcash
Kapcash

Reputation: 6909

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.

Upvotes: 3

Related Questions