Fix: Plugin Depends on Unregistered Dependencies in Nuxt

What Causes This Error?

This error occurs when a plugin declares dependencies using dependsOn but those dependencies don’t exist or aren’t properly named.

The Problem

// plugins/my-plugin.ts
export default defineNuxtPlugin({
  name: 'my-plugin',
  dependsOn: ['auth-plugin'],  // 'auth-plugin' doesn't exist!
  setup() {
    // ...
  }
})

Common Causes and Fixes

Cause 1: Typo in Dependency Name

// plugins/auth.ts
export default defineNuxtPlugin({
  name: 'auth',  // Named 'auth', not 'auth-plugin'
  setup() {}
})

// plugins/dashboard.ts
// ❌ Wrong - typo in dependency
export default defineNuxtPlugin({
  name: 'dashboard',
  dependsOn: ['auth-plugin'],  // Should be 'auth'
  setup() {}
})

// ✅ Correct
export default defineNuxtPlugin({
  name: 'dashboard',
  dependsOn: ['auth'],
  setup() {}
})

Cause 2: Plugin Not Named

// plugins/auth.ts
// ❌ Wrong - no name defined
export default defineNuxtPlugin(() => {
  // Anonymous plugin can't be depended on
})

// ✅ Correct - add a name
export default defineNuxtPlugin({
  name: 'auth',
  setup() {
    // ...
  }
})

Cause 3: Plugin File Missing

Ensure the plugin file exists:

plugins/
  auth.ts       ← Must exist if depended on
  dashboard.ts

Cause 4: Plugin Load Order

Plugins are loaded alphabetically by default. If dependency order matters:

// plugins/01.auth.ts - loads first
export default defineNuxtPlugin({
  name: 'auth',
  setup() {}
})

// plugins/02.dashboard.ts - loads second
export default defineNuxtPlugin({
  name: 'dashboard',
  dependsOn: ['auth'],
  setup() {}
})

Finding Plugin Names

List all registered plugins:

// In a component or another plugin
const nuxtApp = useNuxtApp()
console.log('Plugins:', Object.keys(nuxtApp._dependencies || {}))

Or check your plugins directory:

ls -la plugins/

Proper Plugin Dependencies

// plugins/api.ts
export default defineNuxtPlugin({
  name: 'api',
  setup() {
    return {
      provide: {
        api: { fetch: () => {} }
      }
    }
  }
})

// plugins/auth.ts
export default defineNuxtPlugin({
  name: 'auth',
  dependsOn: ['api'],  // Depends on 'api' plugin
  setup() {
    const { $api } = useNuxtApp()
    // Can safely use $api here
  }
})

Alternative: Use enforce

Instead of dependsOn, use enforce for simpler ordering:

// plugins/base.ts
export default defineNuxtPlugin({
  name: 'base',
  enforce: 'pre',  // Runs first
  setup() {}
})

// plugins/feature.ts
export default defineNuxtPlugin({
  name: 'feature',
  enforce: 'post',  // Runs last
  setup() {
    // 'base' will have already run
  }
})

Checking Dependencies

Debug plugin registration:

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'app:resolve'(app) {
      console.log('Plugins:', app.plugins.map(p => ({
        src: p.src,
        name: p.name
      })))
    }
  }
})

Quick Reference

Plugin A	Plugin B (depends on A)	Works?
name: 'auth'	dependsOn: ['auth']	✅ Yes
name: 'auth'	dependsOn: ['Auth']	❌ No (case-sensitive)
No name	dependsOn: ['auth']	❌ No
name: 'auth-plugin'	dependsOn: ['auth']	❌ No

Quick Checklist

• Dependency plugin has a name property
• Dependency name matches exactly (case-sensitive)
• Dependency plugin file exists
• No circular dependencies
• Plugin uses object syntax with setup()