feat(kit): support passing getter to addVitePlugin and addWebpackPlugin (#20525)

packages/kit/src/build.ts

@@ -106,9 +106,11 @@ export function extendViteConfig (
 /**
  * Append webpack plugin to the config.
  */
-export function addWebpackPlugin (plugin: WebpackPluginInstance | WebpackPluginInstance[], options?: ExtendWebpackConfigOptions) {
+export function addWebpackPlugin (pluginOrGetter: WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[]), options?: ExtendWebpackConfigOptions) {
-  const method: 'push' | 'unshift' = options?.prepend ? 'unshift' : 'push'
   extendWebpackConfig((config) => {
+    const method: 'push' | 'unshift' = options?.prepend ? 'unshift' : 'push'
+    const plugin = typeof pluginOrGetter === 'function' ? pluginOrGetter() : pluginOrGetter
+
     config.plugins = config.plugins || []
     if (Array.isArray(plugin)) {
       config.plugins[method](...plugin)
@@ -121,9 +123,11 @@ export function addWebpackPlugin (plugin: WebpackPluginInstance | WebpackPluginI
 /**
  * Append Vite plugin to the config.
  */
-export function addVitePlugin (plugin: VitePlugin | VitePlugin[], options?: ExtendViteConfigOptions) {
+export function addVitePlugin (pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]), options?: ExtendViteConfigOptions) {
-  const method: 'push' | 'unshift' = options?.prepend ? 'unshift' : 'push'
   extendViteConfig((config) => {
+    const method: 'push' | 'unshift' = options?.prepend ? 'unshift' : 'push'
+    const plugin = typeof pluginOrGetter === 'function' ? pluginOrGetter() : pluginOrGetter
+
     config.plugins = config.plugins || []
     if (Array.isArray(plugin)) {
       config.plugins[method](...plugin)

packages/nuxt/src/core/nuxt.ts

@@ -78,17 +78,17 @@ async function initNuxt (nuxt: Nuxt) {
     exclude: [join(nuxt.options.rootDir, 'index.html')],
     patterns: vueAppPatterns(nuxt)
   }
-  addVitePlugin(ImportProtectionPlugin.vite(config))
+  addVitePlugin(() => ImportProtectionPlugin.vite(config))
-  addWebpackPlugin(ImportProtectionPlugin.webpack(config))
+  addWebpackPlugin(() => ImportProtectionPlugin.webpack(config))
 
   if (nuxt.options.experimental.localLayerAliases) {
     // Add layer aliasing support for ~, ~~, @ and @@ aliases
-    addVitePlugin(LayerAliasingPlugin.vite({
+    addVitePlugin(() => LayerAliasingPlugin.vite({
       sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client,
       // skip top-level layer (user's project) as the aliases will already be correctly resolved
       layers: nuxt.options._layers.slice(1)
     }))
-    addWebpackPlugin(LayerAliasingPlugin.webpack({
+    addWebpackPlugin(() => LayerAliasingPlugin.webpack({
       sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client,
       // skip top-level layer (user's project) as the aliases will already be correctly resolved
       layers: nuxt.options._layers.slice(1),
@@ -102,8 +102,8 @@ async function initNuxt (nuxt: Nuxt) {
       sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client,
       transformerOptions: nuxt.options.optimization.asyncTransforms
     }
-    addVitePlugin(UnctxTransformPlugin.vite(options))
+    addVitePlugin(() => UnctxTransformPlugin.vite(options))
-    addWebpackPlugin(UnctxTransformPlugin.webpack(options))
+    addWebpackPlugin(() => UnctxTransformPlugin.webpack(options))
 
     // Add composable tree-shaking optimisations
     const serverTreeShakeOptions: TreeShakeComposablesPluginOptions = {
@@ -111,23 +111,23 @@ async function initNuxt (nuxt: Nuxt) {
       composables: nuxt.options.optimization.treeShake.composables.server
     }
     if (Object.keys(serverTreeShakeOptions.composables).length) {
-      addVitePlugin(TreeShakeComposablesPlugin.vite(serverTreeShakeOptions), { client: false })
+      addVitePlugin(() => TreeShakeComposablesPlugin.vite(serverTreeShakeOptions), { client: false })
-      addWebpackPlugin(TreeShakeComposablesPlugin.webpack(serverTreeShakeOptions), { client: false })
+      addWebpackPlugin(() => TreeShakeComposablesPlugin.webpack(serverTreeShakeOptions), { client: false })
     }
     const clientTreeShakeOptions: TreeShakeComposablesPluginOptions = {
       sourcemap: nuxt.options.sourcemap.client,
       composables: nuxt.options.optimization.treeShake.composables.client
     }
     if (Object.keys(clientTreeShakeOptions.composables).length) {
-      addVitePlugin(TreeShakeComposablesPlugin.vite(clientTreeShakeOptions), { server: false })
+      addVitePlugin(() => TreeShakeComposablesPlugin.vite(clientTreeShakeOptions), { server: false })
-      addWebpackPlugin(TreeShakeComposablesPlugin.webpack(clientTreeShakeOptions), { server: false })
+      addWebpackPlugin(() => TreeShakeComposablesPlugin.webpack(clientTreeShakeOptions), { server: false })
     }
   })
 
   if (!nuxt.options.dev) {
     // DevOnly component tree-shaking - build time only
-    addVitePlugin(DevOnlyPlugin.vite({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
+    addVitePlugin(() => DevOnlyPlugin.vite({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
-    addWebpackPlugin(DevOnlyPlugin.webpack({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
+    addWebpackPlugin(() => DevOnlyPlugin.webpack({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
   }
 
   // TODO: [Experimental] Avoid emitting assets when flag is enabled

packages/nuxt/src/imports/module.ts

@@ -81,8 +81,8 @@ export default defineNuxtModule<Partial<ImportsOptions>>({
     nuxt.options.alias['#imports'] = join(nuxt.options.buildDir, 'imports')
 
     // Transform to inject imports in production mode
-    addVitePlugin(TransformPlugin.vite({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
+    addVitePlugin(() => TransformPlugin.vite({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
-    addWebpackPlugin(TransformPlugin.webpack({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
+    addWebpackPlugin(() => TransformPlugin.webpack({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
 
     const priorities = nuxt.options._layers.map((layer, i) => [layer.config.srcDir, -i] as const).sort(([a], [b]) => b.length - a.length)
 

packages/nuxt/src/pages/module.ts

@@ -157,8 +157,8 @@ export default defineNuxtModule({
       )
     }
     nuxt.hook('modules:done', () => {
-      addVitePlugin(PageMetaPlugin.vite(pageMetaOptions))
+      addVitePlugin(() => PageMetaPlugin.vite(pageMetaOptions))
-      addWebpackPlugin(PageMetaPlugin.webpack(pageMetaOptions))
+      addWebpackPlugin(() => PageMetaPlugin.webpack(pageMetaOptions))
     })
 
     // Add prefetching support for middleware & layouts

test/fixtures/basic/nuxt.config.ts

@@ -106,8 +106,8 @@ export default defineNuxtConfig({
           if (id === 'virtual.css') { return ':root { --virtual: red }' }
         }
       }))
-      addVitePlugin(plugin.vite())
+      addVitePlugin(() => plugin.vite())
-      addWebpackPlugin(plugin.webpack())
+      addWebpackPlugin(() => plugin.webpack())
     },
     function (_options, nuxt) {
       const routesToDuplicate = ['/async-parent', '/fixed-keyed-child-parent', '/keyed-child-parent', '/with-layout', '/with-layout2']