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... — Muluken Getachew
– Muluken Getachew, Commented Jun 17, 2021 at 15:45

Kapcash · Accepted Answer · 2021-06-17 15:42:38Z

3

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.

answered Jun 17, 2021 at 15:42

Kapcash

6,9802 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related