Reactive Url Query read & write object that can be used in Nuxt and in several components at the same time

reactiveUrlQuery.ts

import { useUrlSearchParams as useVueUseUrlSearchParams } from '@vueuse/core'

const paramsInstances = new Map<string, ReturnType<typeof useVueUseUrlSearchParams>>()

export function useRouteQuery<T extends Record<string, any> = Record<string, any>>(key?: string) {
  if (import.meta.server) {
    return useRoute().query as T
  }

  const finalKey = key ?? window.location.pathname
  if (!paramsInstances.has(finalKey)) {
    paramsInstances.set(finalKey, useVueUseUrlSearchParams('history'))
  }
  const query = paramsInstances.get(finalKey)! as T
  Object.assign(query, getUrlQuery())
  return query
}

function getUrlQuery() {
  return Object.fromEntries(new URLSearchParams(window.location.search))
}

See vueuse/vueuse#3759