Nuxt/test/fixtures/basic/pages/lazy-import-components/index.vue
tbitw2549 e304d6c367 feat: support condition, media query, and never
This adds 3 more types of hydration to cover most of the use cases.
2024-08-25 13:53:29 +03:00

33 lines
846 B
Vue

<template>
<div>
<LazyNCompAll message="lazy-named-comp-all" />
<LazyNCompClient message="lazy-named-comp-client" />
<LazyNCompServer message="lazy-named-comp-server" />
<LazyEventDelayedEvent id="lazyevent" />
<LazyEventView />
<LazyNeverDelayedNever />
<LazyEventDelayedEvent
id="lazyevent2"
:hydrate="createEventLoader(['click'])"
/>
<LazyIfDelayedCondition id="lazycondition" />
<button
id="conditionbutton"
@click="state++"
/>
<LazyIfDelayedCondition
id="lazycondition2"
:hydrate="state > 1"
/>
<LazyIdleDelayedNetwork />
<div style="height:3000px">
This is a very tall div
</div>
<LazyVisibleDelayedVisible />
</div>
</template>
<script setup lang="ts">
const state = useState('delayedHydrationCondition', () => 1)
</script>