Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/nuxt/src/app/components/client-only.ts
View File

@ -1,5 +1,6 @@
import { cloneVNode, createElementBlock, createStaticVNode, defineComponent, getCurrentInstance, h, onMounted, provide, ref } from 'vue' import { cloneVNode, createElementBlock, createStaticVNode, defineComponent, getCurrentInstance, h, onMounted, provide, ref } from 'vue'
import type { ComponentInternalInstance, ComponentOptions, InjectionKey } from 'vue' import type { ComponentInternalInstance, ComponentOptions, InjectionKey } from 'vue'
import { useNuxtApp } from '../nuxt'
import { getFragmentHTML } from './utils' import { getFragmentHTML } from './utils'
export const clientOnlySymbol: InjectionKey<boolean> = Symbol.for('nuxt:client-only') export const clientOnlySymbol: InjectionKey<boolean> = Symbol.for('nuxt:client-only')
@ -12,6 +13,12 @@ export default defineComponent({
setup (_, { slots, attrs }) { setup (_, { slots, attrs }) {
const mounted = ref(false) const mounted = ref(false)
onMounted(() => { mounted.value = true }) 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) provide(clientOnlySymbol, true)
return (props: any) => { return (props: any) => {
if (mounted.value) { return slots.default?.() } if (mounted.value) { return slots.default?.() }
@ -63,7 +70,7 @@ export function createClientOnly<T extends ComponentOptions> (component: T) {
// remove existing directives during hydration // remove existing directives during hydration
const directives = extractDirectives(instance) const directives = extractDirectives(instance)
// prevent attrs inheritance since a staticVNode is rendered before hydration // prevent attrs inheritance since a staticVNode is rendered before hydration
for(const key in attrs) { for (const key in attrs) {
delete instance.attrs[key] delete instance.attrs[key]
} }
const mounted$ = ref(false) const mounted$ = ref(false)