window.teardownCalled = true
triggerEl.removeEventListener('click', hydrate)
}
- }
+ },
})
- const show = window.show = ref(true)
+ const show = (window.show = ref(true))
createSSRApp({
setup() {
onMounted(() => {
window.isRootMounted = true
})
- return () => show.value ? h(AsyncComp) : 'off'
- }
+ return () => (show.value ? h(AsyncComp) : 'off')
+ },
}).mount('#app')
</script>
<script>
window.isHydrated = false
- const { createSSRApp, defineAsyncComponent, h, ref, onMounted, hydrateOnIdle } = Vue
+ const {
+ createSSRApp,
+ defineAsyncComponent,
+ h,
+ ref,
+ onMounted,
+ hydrateOnIdle,
+ } = Vue
const Comp = {
setup() {
}
const AsyncComp = defineAsyncComponent({
- loader: () => new Promise(resolve => {
- setTimeout(() => {
- console.log('resolve')
- resolve(Comp)
- requestIdleCallback(() => {
- console.log('busy')
- })
- }, 10)
- }),
- hydrate: hydrateOnIdle()
+ loader: () =>
+ new Promise(resolve => {
+ setTimeout(() => {
+ console.log('resolve')
+ resolve(Comp)
+ requestIdleCallback(() => {
+ console.log('busy')
+ })
+ }, 10)
+ }),
+ hydrate: hydrateOnIdle(),
})
createSSRApp({
- render: () => h(AsyncComp)
+ render: () => h(AsyncComp),
}).mount('#app')
</script>
<div>click to hydrate</div>
<div id="app"><button>0</button></div>
-<style>body { margin: 0 }</style>
+<style>
+ body {
+ margin: 0;
+ }
+</style>
<script>
const isFragment = location.search.includes('?fragment')
}
window.isHydrated = false
- const { createSSRApp, defineAsyncComponent, h, ref, onMounted, hydrateOnInteraction } = Vue
+ const {
+ createSSRApp,
+ defineAsyncComponent,
+ h,
+ ref,
+ onMounted,
+ hydrateOnInteraction,
+ } = Vue
const Comp = {
setup() {
window.isHydrated = true
})
return () => {
- const button = h('button', { onClick: () => count.value++ }, count.value)
+ const button = h(
+ 'button',
+ { onClick: () => count.value++ },
+ count.value,
+ )
if (isFragment) {
return [[h('span', 'one')], button, h('span', 'two')]
} else {
const AsyncComp = defineAsyncComponent({
loader: () => Promise.resolve(Comp),
- hydrate: hydrateOnInteraction(['click', 'wheel'])
+ hydrate: hydrateOnInteraction(['click', 'wheel']),
})
createSSRApp({
window.isRootMounted = true
})
return () => h(AsyncComp)
- }
+ },
}).mount('#app')
</script>
<script>
window.isHydrated = false
- const { createSSRApp, defineAsyncComponent, h, ref, onMounted, hydrateOnMediaQuery } = Vue
+ const {
+ createSSRApp,
+ defineAsyncComponent,
+ h,
+ ref,
+ onMounted,
+ hydrateOnMediaQuery,
+ } = Vue
const Comp = {
setup() {
const AsyncComp = defineAsyncComponent({
loader: () => Promise.resolve(Comp),
- hydrate: hydrateOnMediaQuery('(max-width:500px)')
+ hydrate: hydrateOnMediaQuery('(max-width:500px)'),
})
createSSRApp({
window.isRootMounted = true
})
return () => h(AsyncComp)
- }
+ },
}).mount('#app')
</script>
<div style="height: 1000px">scroll to the bottom to hydrate</div>
<div id="app"><button>0</button></div>
-<style>body { margin: 0 }</style>
+<style>
+ body {
+ margin: 0;
+ }
+</style>
<script>
const rootMargin = location.search.match(/rootMargin=(\d+)/)?.[1] ?? 0
}
window.isHydrated = false
- const { createSSRApp, defineAsyncComponent, h, ref, onMounted, hydrateOnVisible } = Vue
+ const {
+ createSSRApp,
+ defineAsyncComponent,
+ h,
+ ref,
+ onMounted,
+ hydrateOnVisible,
+ } = Vue
const Comp = {
setup() {
window.isHydrated = true
})
return () => {
- const button = h('button', { onClick: () => count.value++ }, count.value)
+ const button = h(
+ 'button',
+ { onClick: () => count.value++ },
+ count.value,
+ )
if (isFragment) {
return [[h('span', 'one')], button, h('span', 'two')]
} else {
const AsyncComp = defineAsyncComponent({
loader: () => Promise.resolve(Comp),
- hydrate: hydrateOnVisible({rootMargin: rootMargin + 'px'})
+ hydrate: hydrateOnVisible({ rootMargin: rootMargin + 'px' }),
})
createSSRApp({
window.isRootMounted = true
})
return () => h(AsyncComp)
- }
+ },
}).mount('#app')
</script>
<html lang="en">
<head>
<meta charset="UTF-8" />
- <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+ <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<meta
http-equiv="content-security-policy"
content="require-trusted-types-for 'script'"