We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation .
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<ServerOnly>
I would like to add a footer to my page containing the generation timestamp. However, using new Date() does not really work as it is overriden with the current time after hydration. It would be great to have a <ServerOnly> component analog to the existing <ClientOnly> component.
new Date()
<ClientOnly>
I also tried to put it into defineAppConfig which is for "Public tokens that are determined at build time [...]" but that still leads to the date being hydrated on the client.
defineAppConfig
The text was updated successfully, but these errors were encountered:
This already exists: https://nuxt.com/docs/guide/directory-structure/components#server-components
Sorry, something went wrong.
Using server components would mean that for every slightly different footer I would need a new component. The beauty of the <ClientOnly> component is that it simply accepts markup in its slot instead of requiring a new component for every area where it is used.
Ah, I see. We use https://github.com/freddy38510/vue3-lazy-hydration for such things. So you can wrap your time output in template with:
< template > < LazyHydrationWrapper > {{ new Date () }} </ LazyHydrationWrapper > </ template >
Having no lazy-hydration specific prop on < LazyHydrationWrapper> means it will never hydrate on client side.
< LazyHydrationWrapper>
There is also really nice nuxt-module to wrap vue3-lazy-hydration: https://github.com/Baroshem/nuxt-lazy-hydrate . With this, you'd use <NuxtLazyHydrate> instead of <LazyHydrationWrapper> .
<NuxtLazyHydrate>
<LazyHydrationWrapper>
There is an open issue to bake this into nuxt. Hopefully it will land some day: #24242
No branches or pull requests
