Nuxt.js: Add param to addPlugin that injects plugin at bottom of array instead of top

[hecktarzuli]

What problem does this feature solve?

Currently we have some plugins that use 'inject'. We also have other plugins that use the injected plugins, which require a specific order. When you do a addPlugin via ModuleContainer it always does an unshift so plugins are no longer in the order desired.

I think it's a bit presumptuous to think plugins added via modules should always be added to the top of your 'core' plugins that you have already defined in your nuxt.config.js. Adding this bool param would give you more control.

What does the proposed changes look like?

addPlugin(template, addToBottom)

_{This feature request is available on Nuxt community (#c9186)}

[rchl]

It might work when having one module that requires that but with more modules (and loose plugins) I think it would quickly get confusing and hard to follow. Also it wouldn't be very flexible.

I think a better solution would be to have a priority parameter that could be set to anything from -Infinity to +Infinity and plugins would be sorted according to it. But that is not ideal solution either as again, it could quickly get out of hand when using multiple third-party modules (similarly to how z-index in css can get out of hand quickly).

[pi0]

The other solution would be dependency based sorting of modules executation.

[hecktarzuli]

I'd like to avoid a priority param as having modules/plugins THAT dependent on load order seems like an indication of 'bad code smell'.

If we had a built-in "plugins:done" hook/event on client side (and probably server) much of this would go away since other plugins could wait until all plugins are 'settled' before accessing dependancies.

All in all, plugins really shouldn't care what order they are loaded in, but they do need something to tell them when it's safe to load if they are waiting on other plugins to load.

[hecktarzuli]

The other solution would be dependency based sorting of modules executation.

We already have modules:done, I don't think this should be needed.

[pi0]

@hecktarzuli Using modules:done is not making any different. Two module hooking into it still need a periorty. Waiting on runtime would not be a good solution. At best it makes possiblity of dead locks.

As a real-world example, auth module plugin depends on axios and there are plugins that depend on both in a specific order (before/after axios or auth). So we should sort them in a working order. This can be done if auth plugin specifics it depends on axios when being registered.

[pi0]

If we had a built-in "plugins:done" hook/event on client side (and probably server) much of this would go away since other plugins could wait until all plugins are 'settled' before accessing dependancies.

What if two plugins hook into it? Then both are having same periorty. Also if they run at the end, how to register plugins after them? (Taking auth example. Plugins that depend on auth)

[hecktarzuli]

The plugins would be injected/registered as normal (in any order). The idea is the plugins themselves would listen to a plugins:done event to know when they can start accessing other plugins is all.

For example, drift plugin relies on our uiEvent Bus plugin. We would just have code in the drift plugin that does something like:

[drift plugin]
app.hook('plugins:done', () => {
app.$uiEvents.$on('chat:clicked', () => { this.drift.open() }
})

[uiEvents bus plugin]
inject('uiEvents', { .... })

To me, this is much cleaner and easier to follow than than a hidden & magic priorities.

[pi0]

Nice idea to have a such hook, however Issue title does not matches.

[hecktarzuli]

Lol, yeah kind of a tangent / a better fix to my original request. I'll close this and make a new one.

[hecktarzuli]

New Request: https://cmty.app/nuxt/nuxt.js/issues/c9209

[b4dnewz]

It's a bit off-top but I try to ask anyway, because I can't find any answer in the documentation.

Are plugins registered within a nuxt module added to the (top) plugins list before actual plugins (as specified in config file) are loaded?

I'm trying to extend this nuxt enabled module which adds the plugin using addPlugin but when I try to access the prototype property inside my custom plugin, registered at plugins/custom-dialogs.js with the following content:

import Vue from 'vue'

Vue.use((inst) => {
  console.log(inst.prototype.$dialog)
})

And turns out to be undefined.. my guess is that modules are loaded after plugins, which maybe is not the desired behaviour.

Also I looked into the generated nuxt/index.js file and the strange thing is that:

/* Plugins */

...
import nuxt_plugin_vuetifydialog_bf0ed622 from 'nuxt_plugin_vuetifydialog_bf0ed622' // Source: .\\vuetify-dialog.js (mode: 'client')
...
import nuxt_plugin_customdialogs_6f39eec5 from 'nuxt_plugin_customdialogs_6f39eec5' // Source: ..\\plugins\\custom-dialogs (mode: 'client')

It's loaded before my code but still undefined..

I've tried with another dummy plugin which sets vue prototype properties and placed it before mine in plugins array and I can access the property from the next plugin.

[b4dnewz]

never mind, I found where was the problem, the plugin registers $dialog at context level.
also after check with extendPlugins I see the plugins are ordered correctly, so all my previous comment can be ignored