How to Make Vuetify available in Nuxt's context

You'll probably are importing Vuetify.js in a plugin like:

// plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

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

Thanks to using Vue.use, you have $vuetify available in your components instances. You can access to it with this.$vuetify (in the JS part of your component).

But, what if we want to access to the Vuetify object in our context? Say in asyncData, fetch, plugins, middlewares and nuxtServerInit.

You only need to add a few lines to your plugin:

// plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

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

export default function(_, inject) {
  // make `$vuetify` available in Nuxt context
  inject('vuetify', Vue.prototype.$vuetify)
}

Notice that we are not using the first parameter, that's the context, btw. We only need the second parameter, Nuxt's inject method. That's why we use the _ as first parameter, as a "throwaway variable", as some people call it.

Oh, and remember to include the vuetify plugin in your nuxt.config.js file:

//nuxt.config.js:

export default {
  plugins: ['~/plugins/vuetify']
}

🖖🏾