How to make Vuetify available in Nuxt’s context

  javascript, nuxt.js, plugins, vuetify.js

I’m importing Vuetify.js in a Nuxt plugin and I would like to make it accesible to other plugins.
I tried to assign it directly to the context like the vuetify-module.

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import options from '@/vuetify.options.js'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify, {...options})

export default ctx => {
  const vuetify = new Vuetify(options)

  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework

}

nuxt.config.js

module.exports = {
  ...
  plugins: [
    '@/plugins/vuetify'
  ],
  ...
}

But I always get an undefined value…

plugin.js

export default function (ctx, inject) {
  console.log('app.vuetify :', ctx.app.vuetify) // undefined
  console.log('$vuetify :', ctx.$vuetify) // undefined
}

I also tried using the inject method like in this post, but then I get a Type Error : Cannot set property $vuetify of #<Vue> which has only a getter.

vuetify.js

export default function(_, inject) {
  const vuetify = new Vuetify(options)
  inject('vuetify', vuetify)
}

NB: I register the plugin in a module using the addPlugin method.

module.js

module.exports = function (moduleOptions) {
  this.addPlugin({
    fileName: 'myplugin.js',
    moduleOptions,
    src: resolve(__dirname, 'plugin.js'),
    mode: 'client'
  })
}

Source: Ask Javascript Questions

One Reply to “How to make Vuetify available in Nuxt’s context”

LEAVE A COMMENT