mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-17 03:14:46 +00:00
47 lines
1.1 KiB
JavaScript
47 lines
1.1 KiB
JavaScript
|
import { defineComponent, createElementBlock } from 'vue'
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'NuxtClientFallback',
|
||
|
|
inheritAttrs: false,
|
||
|
|
props: {
|
||
|
|
uid: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
fallbackTag: {
|
||
|
|
type: String,
|
||
|
|
default: () => 'div'
|
||
|
|
},
|
||
|
|
fallback: {
|
||
|
|
type: String,
|
||
|
|
default: () => ''
|
||
|
|
},
|
||
|
|
placeholder: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
placeholderTag: {
|
||
|
|
type: String
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emits: ['ssr-error'],
|
||
|
|
setup (props, ctx) {
|
||
|
|
const mounted = ref(false)
|
||
|
|
const ssrFailed = useState(`${props.uid}`)
|
||
|
|
|
||
|
|
if (ssrFailed.value) {
|
||
|
|
onMounted(() => { mounted.value = true })
|
||
|
|
}
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
if (mounted.value) { return ctx.slots.default?.() }
|
||
|
|
if (ssrFailed.value) {
|
||
|
|
const slot = ctx.slots.placeholder || ctx.slots.fallback
|
||
|
|
if (slot) { return slot() }
|
||
|
|
const fallbackStr = props.placeholder || props.fallback
|
||
|
|
const fallbackTag = props.placeholderTag || props.fallbackTag
|
||
|
|
return createElementBlock(fallbackTag, null, fallbackStr)
|
||
|
|
}
|
||
|
|
return ctx.slots.default?.()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|