The components folder will have a content folder. If you create a new folder in the components folder, i.e a folder called layouts, create a new component and name it SideMenu.
In a page, use the component as LayoutSideMenu. This will work when you do dev, build and serve locally. But if you then use a CICD pipeline and push it to Cloudflare either through Wrangler (or by using Cloudflare's own build pipeline), the error Hydration mismatch error appears with no additional warning/error context. The same happens if you build with Netlify, I haven't tested other providers. If you upload the assets directly to Cloudflare without Wrangler, the error doesn't seem to occur.
I was able to reproduce it for a short while locally, but it seems like running the dev command once before building might do something that fixes it locally.
Describe the bug
It seems like Nuxt Content does something that breaks being able to use folders to automatically prefix components in Nuxt, but it only happens in production/some CDN providers. Meaning if you put your component in a folder and then use it as described in the reproduction section, it will cause a "hydration mismatch".
The workaround is to simply put components in the root of the components folder and instead prefix the name manually i.e LayoutSideMenu.vue instead of layout/SideMenu.vue. Using the presets for Cloudflare or Netlify will not help to fix this issue, neither will turning off optimisations (as recommended to fix hydration errors) for the respective providers.
Additional context
The following nuxt.config might be relevant to reproduce the issue:
I originally based my project on the shadcn-docs project but have since modified it heavily. If reproducing the issue isn't straightforward, I can share more of the config.
Environment
Reproduction
Setup Nuxt project with Nuxt Content.
The components folder will have a content folder. If you create a new folder in the components folder, i.e a folder called
layouts, create a new component and name itSideMenu.In a page, use the component as
LayoutSideMenu. This will work when you do dev, build and serve locally. But if you then use a CICD pipeline and push it to Cloudflare either through Wrangler (or by using Cloudflare's own build pipeline), the errorHydration mismatch errorappears with no additional warning/error context. The same happens if you build with Netlify, I haven't tested other providers. If you upload the assets directly to Cloudflare without Wrangler, the error doesn't seem to occur.I was able to reproduce it for a short while locally, but it seems like running the dev command once before building might do something that fixes it locally.
Describe the bug
It seems like Nuxt Content does something that breaks being able to use folders to automatically prefix components in Nuxt, but it only happens in production/some CDN providers. Meaning if you put your component in a folder and then use it as described in the reproduction section, it will cause a "hydration mismatch".
The workaround is to simply put components in the root of the components folder and instead prefix the name manually i.e
LayoutSideMenu.vueinstead oflayout/SideMenu.vue. Using the presets for Cloudflare or Netlify will not help to fix this issue, neither will turning off optimisations (as recommended to fix hydration errors) for the respective providers.Additional context
The following nuxt.config might be relevant to reproduce the issue:
I originally based my project on the shadcn-docs project but have since modified it heavily. If reproducing the issue isn't straightforward, I can share more of the config.
Logs