Nuxt Plugin Dependencies

When writing plugins for Nuxt, you can specify dependencies:

export default defineNuxtPlugin({
  name: 'my-sick-plugin-that-will-change-the-world',
  dependsOn: ['another-plugin']
  async setup (nuxtApp) {
    // The setup is only run once `another-plugin` has been initialized
  }
})

But why do we need this?

Normally, plugins are initialized sequentially — based on the order they are in the filesystem:

plugins/
- 01.firstPlugin.ts    // Use numbers to force non-alphabetical order
- 02.anotherPlugin.ts
- thirdPlugin.ts

But we can also have them loaded in parallel, which speeds things up if they don’t depend on each other:

export default defineNuxtPlugin({
  name: 'my-parallel-plugin',
  parallel: true,
  async setup (nuxtApp) {
    // Runs completely independently of all other plugins
  }
})

However, sometimes we have other plugins that depend on these parallel plugins. By using the dependsOn key, we can let Nuxt know which plugins we need to wait for, even if they’re being run in parallel:

export default defineNuxtPlugin({
  name: 'my-sick-plugin-that-will-change-the-world',
  dependsOn: ['my-parallel-plugin']
  async setup (nuxtApp) {
    // Will wait for `my-parallel-plugin` to finish before initializing
  }
})

Although useful, you don’t actually need this feature (probably). Pooya Parsa has said this:

I wouldn't personally use this kind of hard dependency graph in plugins. Hooks are much more flexible in terms of dependency definition and pretty sure every situation is solvable with correct patterns. Saying I see it as mainly an "escape hatch" for authors looks good addition considering historically it was always a requested feature.