fix(nuxt): check island element instead of hydration state (#26480)

nuxt · Mar 26, 2024 · fd7d9d2 · fd7d9d2
1 parent 1dbd46e
commit fd7d9d2
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/packages/nuxt/src/app/components/nuxt-island.ts b/packages/nuxt/src/app/components/nuxt-island.ts
@@ -109,15 +109,15 @@ export default defineComponent({
       components: {}
     }
 
-    if (nuxtApp.isHydrating) {
+    if (instance.vnode.el) {
       payloads.slots = toRaw(nuxtApp.payload.data[`${props.name}_${hashId.value}`])?.slots ?? {}
       payloads.components = toRaw(nuxtApp.payload.data[`${props.name}_${hashId.value}`])?.components ?? {}
     }
 
     const ssrHTML = ref<string>('')
 
-    if (import.meta.client && nuxtApp.isHydrating) {
-      ssrHTML.value = getFragmentHTML(instance.vnode?.el ?? null, true)?.join('') || ''
+    if (import.meta.client && instance.vnode?.el) {
+      ssrHTML.value = getFragmentHTML(instance.vnode.el, true)?.join('') || ''
       const key = `${props.name}_${hashId.value}`
       nuxtApp.payload.data[key] ||= {}
       nuxtApp.payload.data[key].html = ssrHTML.value
@@ -250,7 +250,7 @@ export default defineComponent({
           // this is used to force trigger Teleport when vue makes the diff between old and new node
           const isKeyOdd = teleportKey.value === 0 || !!(teleportKey.value && !(teleportKey.value % 2))
 
-          if (uid.value && html.value && (import.meta.server || props.lazy ? canTeleport : mounted.value || nuxtApp.isHydrating)) {
+          if (uid.value && html.value && (import.meta.server || props.lazy ? canTeleport : (mounted.value || instance.vnode?.el))) {
             for (const slot in slots) {
               if (availableSlots.value.includes(slot)) {
                 teleports.push(createVNode(Teleport,