Sync Query Params (SSR Support)

[cursive cape]

Hi @soft locust. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Nuxt does not provide a built-in composable exactly like useUrlSearchParams from VueUse with SSR support. However, Nuxt’s routing system (using useRoute and useRouter) is fully SSR-compatible, and your current approach is the recommended way to sync query params with SSR support in Nuxt.

Key points from the Nuxt docs:

• useRoute gives you access to the current route, including query parameters, and is SSR-friendly. You should always use Nuxt’s useRoute (not the one from vue-router) to avoid hydration and synchronization issues in SSR contexts [Nuxt useRoute composable].
• You can pass query parameters as refs or computeds to useFetch/useLazyFetch, and Nuxt will automatically refetch data when these change. This is SSR-safe and works both on server and client [Nuxt useFetch: Reactive Keys and Shared State].
• There is no mention in the official docs of a Nuxt module or composable that wraps query param syncing in a more abstracted way than what you’re already doing.

Your approach is correct and SSR-safe:

• You’re using useRoute to read query params and useRouter to update them.
• You’re passing computed refs to useLazyFetch, which will trigger refetches as the query params change.
• This pattern is fully compatible with SSR in Nuxt.

Example from the docs (dynamic query param with SSR support):

<script setup lang="ts">
const route = useRoute()
const { data: posts } = await useAsyncData(
  'posts',
  () => $fetch('<https://fakeApi.com/posts',> {
    params: {
      page: route.query.page,
    },
  }), {
    watch: [() => route.query.page],
  },
)
</script>

[Nuxt useAsyncData: Watch Params]

Summary:
There is no official Nuxt composable or module that abstracts query param syncing beyond what you’re doing. Your approach using useRoute, useRouter, and passing computeds/refs to useFetch/useLazyFetch is the recommended, SSR-compatible solution in Nuxt. If you need more abstraction, you would need to build your own composable, as you have started to do.

If you have specific pain points with your current approach, please share them, and I can help suggest improvements based on Nuxt’s capabilities.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@soft locust Kapa.ai is still learning and improving, please let me know how I did by reacting below.