Route Query
Bind Vue state to the Nuxt route query with useRouteQuery.
useRouteQuery binds state to the router's query parameters, using the
Nuxt router for navigation, so writes integrate with middleware, scroll
behavior, and history. The URL is the single source of truth: refreshing,
sharing, or bookmarking the link restores the exact state.
<script setup lang="ts">
import { } from 'kvantjs/nuxt'
import * as from 'kvantjs/schema'
const = ('q', .().(''))
</script>
<template>
< v-model="">
</template>Setting a key to undefined removes its entry. Values equal to the
schema default are never written. Defaults stay internal.
Multiple composables bound to the same key stay in sync automatically.
Key maps work too:
const = ({
: .().(''),
: .().(0),
: .(['asc', 'desc']).('asc'),
: .(.()).([]), // repeated params: ?tags=a&tags=b
})
. = { ...., : .. + 1 }
.. += 1 // deeply reactive!Fast-changing values
kvant does not yet provide built-in throttle/debounce for URL writes. Until then, avoid binding state directly to quickly changing values (text inputs, sliders), or wrap the binding in a throttled layer with local state:
<script setup lang="ts">
import { watchThrottled } from '@vueuse/core'
const search = useRouteQuery('q', kv.string().default(''))
// Local ref updates instantly; the URL follows at most every 300 ms
const text = ref(search.value)
watchThrottled(text, v => search.value = v, { throttle: 300 })
</script>
<template>
<input v-model="text">
</template>Options
Prop
Type
Set options once for a component subtree using the provide function:
<script setup lang="ts">
import { } from 'kvantjs/nuxt'
({ : 'push' })
</script>