Nuxt.JS: injected functions not available

[vcordes79]

Hello,

I'm showing a dialog by calling

this.$dialog.show(MyComponent)

This works as expected but I don't have access to functions injected by other plugins. The properties are there but with a value of undefined. So if I do a console.log(this) inside the component I get:

$f: undefined

With injected objects it works. Any clues on how to change this?

As a workaround I can access these functions via $store

Thanks, Volker

[vcordes79]

Just found another workaround: If I put the code in vuetify-dialog.js plugin into a new function with a timeout, it works:

window.setTimeout(() => {

const keys = Object.keys(obj.app).filter(
  key =>
    key.startsWith('$') ||
    ['router', 'i18n', 'store', 'vuetify'].indexOf(key) >= 0
)
const context = Object.assign(
  {},
  ...keys.map((prop) => {
    if (obj.app[prop]) return { [prop]: obj.app[prop] }
  })
)
context.route = obj.route
Vue.use(VuetifyDialog, { context, ...pluginOptions })
const instance = Vue.prototype[property]
if (instance) {
  obj[property] = instance
  // inject(property, instance)
}

}, 1)

[alfdocimo]

In my case, if using modules like @nuxtjs/axios you can access them through the wrapper provided in $store . Seems like it maps the modules to the scope of this.$store of the component you're rendering.

So a temp workaround might be using whatever is registered through this wrapper. For instance: await this.$axios.$post to await this.$store.$axios.$post

[vcordes79]

Solved it by reordering the modules like suggested in https://nuxtjs.org/docs/2.x/directory-structure/plugins#the-extendplugins-property

extendPlugins(plugins) {

const pluginIndex = plugins.findIndex(({ src }) =>
  src.endsWith('/vuetify-dialog.js')
)
const shouldBeLastPlugin = plugins[pluginIndex]

plugins.splice(pluginIndex, 1)
plugins.push(shouldBeLastPlugin)
return plugins

}