new function useOnClient or something like watchWithFilter to run on client only

Hi,

I have used vueuse in my VueJS project a lot and recently I started working on Nuxt (SSR), the problem I am facing is I am having a hard time using some composable function that runs on a client like useWindowSize. You can check this conversation: https://github.com/nuxt/framework/discussions/1702

I asked about the same but didn’t get much luck: https://github.com/vueuse/vueuse/issues/881 https://github.com/nuxt/framework/discussions/1702

I think it will be great to provide a guide or something to quickly get started with SSR and vueuse.

[jbmolle]

Hi, I have the same problem with Nuxt3 and useBreakpoints on a desktop. I create const smAndLarger = breakpoints.greater('sm') which is false on SSR and true on desktop. I have a menu <n-menu :mode="smAndLarger ? 'horizontal' : 'vertical' "></n-menu>. The menu is vertical at the begining and should be horizontal then but it always stays vertical except if I reduce the browser window and increase it again. Doing something like this in script setup, solves the problem:

const mobile = ref(true)
watch(smAndLarger, (newValue) => {
  mobile.value = newValue
}, { immediate: true })

and then <n-menu :mode="mobile ? 'horizontal' : 'vertical' "></n-menu>. So it seems the initial value after hydration doesn’t trigger template rendering.

[antfu]

And I think your CSB also works for me

(yes it’s initially zero since it comes from the server-side, you will need to wait for client-side hydration to have it updated.