Hydration mismatch for breakpoints
i have an
isMobile ref that always throws a hydration mismatch. Its a composable that is a resize listener so it always knows if the viewport isMobile or not. On the server its false, on the client its true. This didn't happen with nuxt2. Right now as a workaround, i have to use an isMounted composable:
variable on my component like v-if=isMounted to not get that error. is there a better way?5 Replies
If the component isn’t needed to be rendered on the server side, you could wrap it in the
client-only componentThanks for the response! That would work in an individual component. Lets say in my nuxt layout.vue, i wanted to load various components for a mobile experience, or other ones for desktop. Before, in nuxt2 i would just setup the isMobile ref that gets the viewport width, and a resize listener to listen for viewport size to render one experience or the other. What would be the preferred way to handle this ya think?
https://github.com/mvrlin/nuxt-viewport this is great
GitHub
GitHub - mvrlin/nuxt-viewport: 🌈 Define custom viewports for your ...
🌈 Define custom viewports for your Nuxt project. Contribute to mvrlin/nuxt-viewport development by creating an account on GitHub.
oooo ty.. will check this out!! 🙏
u might need to just switch to
useState instead of a ref