Nuxt Content v3 layouts
I'm migrating my project from Nuxt Content v2 to v3, and almost every page in my project uses a layout. Unfortunately, there's an issue with this: when navigating to another subpage (without a hard reload), the layout glitches, sometimes duplicates, and so on.
To check the layout on each page, I'm forced to create a collection that includes all possible .md files:
content: defineCollection({
type: 'page',
source: '*/**.md'
}),
so that I can use:
const route = useRoute()
const { data: page } = await useAsyncData(route.path, async () => {
return queryCollection('content').path(route.path).first()
})
so that I can later use:
<NuxtLayout :name="page?.meta?.layout || 'default'">
<NuxtPage />
</NuxtLayout>
After navigating to /getting-started/usage and then clicking a button that redirects to /getting-started/test, the layout does not update. However, if I do a hard refresh, it loads correctly.
How should I properly handle layouts in this case?
And - is there an alternative approach to the Document-Driven mode that doesn’t require creating a collection of ALL md files?
Wouldn't this duplicate content in the database? I’m using this collection only for [..slug].vue to display the correct page based on the URL.
What can be done about this? Maybe I’m using the new features incorrectly, or is this a bug?
PS. how can I prevent these types of issues in the future, where a hard refresh behaves completely differently from a regular navigation—especially during development?
github issue: https://github.com/nuxt/content/issues/3107
To check the layout on each page, I'm forced to create a collection that includes all possible .md files:
content: defineCollection({
type: 'page',
source: '*/**.md'
}),
so that I can use:
const route = useRoute()
const { data: page } = await useAsyncData(route.path, async () => {
return queryCollection('content').path(route.path).first()
})
so that I can later use:
<NuxtLayout :name="page?.meta?.layout || 'default'">
<NuxtPage />
</NuxtLayout>
After navigating to /getting-started/usage and then clicking a button that redirects to /getting-started/test, the layout does not update. However, if I do a hard refresh, it loads correctly.
How should I properly handle layouts in this case?
And - is there an alternative approach to the Document-Driven mode that doesn’t require creating a collection of ALL md files?
Wouldn't this duplicate content in the database? I’m using this collection only for [..slug].vue to display the correct page based on the URL.
What can be done about this? Maybe I’m using the new features incorrectly, or is this a bug?
PS. how can I prevent these types of issues in the future, where a hard refresh behaves completely differently from a regular navigation—especially during development?
github issue: https://github.com/nuxt/content/issues/3107
GitHub![[v3] Layout duplication if no hard-reload · Issue #3107 · nuxt/cont...](https://images-ext-1.discordapp.net/external/IXHD2jYlW9yAI414PQ77Wpx4BNoGP2SnDTiuo7ZqOWE/https/opengraph.githubassets.com/c804aaa9f131372cdc03e265165d93085f7d2f57acefada060c8be34fe808212/nuxt/content/issues/3107)
Environment Operating System: Windows_NT Node Version: v20.11.0 Nuxt Version: 3.15.4 CLI Version: 3.21.1 Nitro Version: 2.10.4 Package Manager: pnpm@8.15.2 Builder: - User Config: modules, devtools...
