fix(nuxt): don't check for layout/page with <ClientOnly> (#25714)

This commit is contained in:
Daniel Roe 2024-02-09 20:33:35 +00:00 committed by GitHub
parent 3c271413f8
commit fd671a27ea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,5 +1,6 @@
import { cloneVNode, createElementBlock, createStaticVNode, defineComponent, getCurrentInstance, h, onMounted, provide, ref } from 'vue'
import type { ComponentInternalInstance, ComponentOptions, InjectionKey } from 'vue'
import { useNuxtApp } from '../nuxt'
import { getFragmentHTML } from './utils'
export const clientOnlySymbol: InjectionKey<boolean> = Symbol.for('nuxt:client-only')
@ -12,6 +13,12 @@ export default defineComponent({
setup (_, { slots, attrs }) {
const mounted = ref(false)
onMounted(() => { mounted.value = true })
// Bail out of checking for pages/layouts as they might be included under `<ClientOnly>` 🤷‍♂️
if (import.meta.dev) {
const nuxtApp = useNuxtApp()
nuxtApp._isNuxtPageUsed = true
nuxtApp._isNuxtLayoutUsed = true
}
provide(clientOnlySymbol, true)
return (props: any) => {
if (mounted.value) { return slots.default?.() }
@ -63,7 +70,7 @@ export function createClientOnly<T extends ComponentOptions> (component: T) {
// remove existing directives during hydration
const directives = extractDirectives(instance)
// prevent attrs inheritance since a staticVNode is rendered before hydration
for(const key in attrs) {
for (const key in attrs) {
delete instance.attrs[key]
}
const mounted$ = ref(false)