Nuxt/test/fixtures/basic/components/islands/LongAsyncComponent.vue

41 lines
939 B
Vue

<template>
<div>
<div v-if="count > 2">
count is above 2
</div>
<slot />
{{ data }}
<div id="long-async-component-count">
{{ count }}
</div>
{{ headers['custom-head'] }}
<slot name="test" :count="count" />
<p>hello world !!!</p>
<slot v-for="(t, index) in 3" name="hello" :t="t">
<div :key="t">
fallback slot -- index: {{ index }}
</div>
</slot>
<slot v-for="(t, index) in ['fall', 'back']" name="fallback" :t="t">
<div :key="t">
{{ t }} slot -- index: {{ index }}
</div>
<div :key="t" class="fallback-slot-content">
wonderful fallback
</div>
</slot>
</div>
</template>
<script setup lang="ts">
import { getResponseHeaders } from 'h3'
defineProps<{
count: number
}>()
const evt = useRequestEvent()
const headers = getResponseHeaders(evt)
const { data } = await useFetch('/api/very-long-request')
</script>