mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-14 10:04:05 +00:00
76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
// explicit import to bypass client import protection
|
|
import BreaksServer from '../components/BreaksServer.client'
|
|
// ensure treeshake-client-only module remove these imports without breaking
|
|
import TestGlobal from '../components/global/TestGlobal.vue'
|
|
// direct import of .client components should be treeshaken
|
|
import { FunctionalComponent, LazyClientOnlyScript } from '#components'
|
|
|
|
onMounted(() => import('~/components/BreaksServer.client'))
|
|
onBeforeMount(() => import('~/components/BreaksServer.client'))
|
|
onBeforeUpdate(() => import('~/components/BreaksServer.client'))
|
|
onRenderTracked(() => import('~/components/BreaksServer.client'))
|
|
onRenderTriggered(() => import('~/components/BreaksServer.client'))
|
|
onActivated(() => import('~/components/BreaksServer.client'))
|
|
onDeactivated(() => import('~/components/BreaksServer.client'))
|
|
onBeforeUnmount(() => import('~/components/BreaksServer.client'))
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
This page should not crash when rendered.
|
|
<ClientOnly class="something">
|
|
<span>rendered client-side</span>
|
|
<BreaksServer />
|
|
<BreaksServer>Some slot content</BreaksServer>
|
|
</ClientOnly>
|
|
This should render.
|
|
<div>
|
|
<ClientOnly class="another">
|
|
<span>rendered client-side</span>
|
|
<BreaksServer />
|
|
</ClientOnly>
|
|
</div>
|
|
<div>
|
|
<LazyClientOnly>
|
|
<div class="red">
|
|
i'm red
|
|
</div>
|
|
<div>
|
|
<BreaksServer />
|
|
<FunctionalComponent />
|
|
<TestGlobal />
|
|
</div>
|
|
<template #fallback>
|
|
<div>fallback for ClientOnly</div>
|
|
</template>
|
|
</LazyClientOnly>
|
|
<LazyClientOnlyScript>
|
|
<template #test>
|
|
<BreaksServer />
|
|
<div id="client-side">
|
|
This should be rendered client-side
|
|
</div>
|
|
</template>
|
|
<template #fallback>
|
|
<FunctionalComponent />
|
|
<!-- this should be treeshaken on .client -->
|
|
<BreaksServer />
|
|
</template>
|
|
</LazyClientOnlyScript>
|
|
<div class="blue">
|
|
i'm blue
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.red {
|
|
color: rgb(255, 0, 0);
|
|
}
|
|
.blue {
|
|
color: rgb(0, 0, 255);
|
|
}
|
|
</style>
|