Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-03-03 20:44:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix media post conflict

Browse Source
This commit is contained in:
tbitw2549 2024-09-13 12:07:47 +03:00
parent a9c76a405c
commit 8b95e4e05a
1 changed files with 5 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/nuxt/src/components/runtime/client-delayed-component.ts
View File

@ -51,15 +51,11 @@ export const createLazyMediaComponent = (loader: AsyncComponentLoader) => {
return defineComponent({ return defineComponent({
inheritAttrs: false, inheritAttrs: false,
setup (_, { attrs }) { setup (_, { attrs }) {
if (import.meta.server) { const mediaQuery = attrs.hydrate as string ?? '(min-width: 1px)'
return () => h(defineAsyncComponent(loader), attrs) const comp = defineAsyncComponent({ loader, hydrate: hydrateOnMediaQuery(mediaQuery) })
} const merged = mergeProps(attrs, { 'data-allow-mismatch': '' })
const ready = ref(false) // TODO: fix hydration mismatches on Vue's side. The data-allow-mismatch is ideally a temporary solution due to Vue's SSR limitation with hydrated content.
const nuxt = useNuxtApp() return () => h(comp, merged)
const instance = getCurrentInstance()!
onNuxtReady(() => ready.value = true)
// This one, unlike others, can cause a hydration mismatch even a whole minute after the page loads. Given a query of min-width: 1200px, with a small window, the moment the window expands to at least 1200 it hydrates and causes a hydration mismatch.
return () => ready.value ? h(defineAsyncComponent({ loader, hydrate: hydrateOnMediaQuery(attrs.hydrate ?? '(min-width: 1px)') })) : nuxt.isHydrating && instance.vnode.el ? h('div', attrs) : null
}, },
}) })
} }