From 6b35a08c3218534fa0c4fe7e7189b991c592622a Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.huang@outlook.fr>
Date: Mon, 17 Mar 2025 18:53:51 +0100
Subject: [PATCH] fix(nuxt): add missing lazy hydration prop in regex (#31359)

---
 .../plugins/lazy-hydration-transform.ts        |  2 +-
 packages/nuxt/test/component-loader.test.ts    | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/nuxt/src/components/plugins/lazy-hydration-transform.ts b/packages/nuxt/src/components/plugins/lazy-hydration-transform.ts
index 8b384d2423..ae7bbd35da 100644
--- a/packages/nuxt/src/components/plugins/lazy-hydration-transform.ts
+++ b/packages/nuxt/src/components/plugins/lazy-hydration-transform.ts
@@ -23,7 +23,7 @@ const hydrationStrategyMap = {
   hydrateWhen: 'If',
   hydrateNever: 'Never',
 }
-const LAZY_HYDRATION_PROPS_RE = /\bhydrate-?on-?idle|hydrate-?on-?visible|hydrate-?on-?interaction|hydrate-?on-?media-?query|hydrate-?after|hydrate-?when\b/
+const LAZY_HYDRATION_PROPS_RE = /\bhydrate-?on-?idle|hydrate-?on-?visible|hydrate-?on-?interaction|hydrate-?on-?media-?query|hydrate-?after|hydrate-?when|hydrate-?never\b/
 export const LazyHydrationTransformPlugin = (options: LoaderOptions) => createUnplugin(() => {
   const exclude = options.transform?.exclude || []
   const include = options.transform?.include || []
diff --git a/packages/nuxt/test/component-loader.test.ts b/packages/nuxt/test/component-loader.test.ts
index c69525395e..f4b08b695a 100644
--- a/packages/nuxt/test/component-loader.test.ts
+++ b/packages/nuxt/test/component-loader.test.ts
@@ -121,6 +121,24 @@ describe('components:loader', () => {
       const __nuxt_component_0_lazy_never = createLazyNeverComponent("components/MyComponent.vue", () => import('../components/MyComponent.vue').then(c => c.default || c));"
     `)
   })
+
+  it.each([
+    ['hydrate-on-idle', 'createLazyIdleComponent'],
+    ['hydrate-on-visible', 'createLazyVisibleComponent'],
+    ['hydrate-on-interaction', 'createLazyInteractionComponent'],
+    ['hydrate-on-media-query', 'createLazyMediaQueryComponent'],
+    ['hydrate-after', 'createLazyTimeComponent'],
+    ['hydrate-when', 'createLazyIfComponent'],
+    ['hydrate-never', 'createLazyNeverComponent'],
+  ])('should correctly resolve lazy hydration components %s', async (prop, component) => {
+    const sfc = `
+    <template>
+      <LazyMyComponent ${prop} />
+    </template>
+    `
+    const result = await transform(sfc, '/pages/index.vue').then(r => r.split('\n'))
+    expect(result.join('\n')).toContain(component)
+  })
 })
 
 async function transform (code: string, filename: string) {