Quick Start
Get productive with kvant in seconds.
Core principle
kvant turns key-value interfaces into Vue refs. Bind a key, pass a schema
from kvantjs/schema, and read/write it like any writable Ref. The
interface (here, the URL) stays the single source of truth:
<script setup lang="ts">
import { } from 'kvantjs/vue'
import * as from 'kvantjs/schema'
const = ('q', .().(''))
</script>
<template>
< v-model="">
</template>?q=hello in the URL means query.value is 'hello'. Assigning to
query.value writes back to the URL.
Multiple keys
Bind a whole key map in one call. Updates batch into a single write:
const = ({
: .().(''),
: .().(0),
: .(['asc', 'desc']).('asc'),
: .(.()).([]), // repeated params: ?tags=a&tags=b
})
. = { ...., : .. + 1 }
.. += 1 // deeply reactive!Options
Pass options as the last argument:
const = ('q', .().(''), {
: 'push', // add browser history entries
})Global default options
Set options once for a component subtree using the provide function:
<script setup lang="ts">
import { } from 'kvantjs/vue'
({ : 'push' })
</script>Nested provides merge with parent options by default (extend: true).
Pass { extend: false } to replace instead of merge:
({ : 'push' }, { : false })Every interface
The same pattern works for all supported key-value interfaces:
import { , , , } from 'kvantjs/vue'
import * as from 'kvantjs/schema'
// URL search params: shareable, bookmarkable
const = ('q', .().(''))
// localStorage: persists across reloads, syncs across tabs
const = ('theme', .(['light', 'dark']).('light'))
// sessionStorage: scoped to the current tab
const = ('draft', .().(''))
// Cookies: readable by the server, respect Set-Cookie attributes
const = ('consent', .().(false), {
: 60 * 60 * 24 * 365,
})Full guides: Search Params · Local Storage · Cookies