How override plugins from Nuxt Layer in app?

[lna1989]

Discussed in #25825

^{Originally posted by lna1989 February 16, 2024}
'1.testPlugin.ts' plugin in the layer connected via an auto import and '1.testPlugin.ts' in App. layers connected to app in nuxt.config.ts.

Demo: https://stackblitz.com/edit/nuxt-starter-2r7whv?file=nuxt.config.ts

./layer/plugins/1.testPlugin.ts:

import { defineNuxtPlugin } from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
  console.log('Layer testPlugin.ts')
})

./plugins/1.testPlugin.ts:

import { defineNuxtPlugin } from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
  console.log('App testPlugin.ts')
})

The expected result: We see one message ("App testPlugin.ts'") from the App plugin in the console.
The actual result: We see two messages ("Layer testPlugin.ts'" and "'App testPlugin.ts'") in the console from both the layers plugin and the app.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-2r7whv (Open reproduction)

[markthree]

@lna1989 You can filter by hooks

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: false },
  extends: ["./layer"],
+  hooks: {
+    "app:resolve"(app) {
+      app.plugins = app.plugins.filter((p) =>
+        !p.src?.includes("layer/plugins/1.testPlugin.ts")
+      );
+    },
+  },
});

[danielroe]

If we implement this in future we will likely use the object-syntax to allow deduplication:

export default defineNuxtPlugin({
  name: 'some-plugin',
  setup (nuxtApp) {
    // stuff
  }
})