Cookies
Bind Vue state to cookies in Nuxt, SSR-ready out of the box.
useCookies binds state to a cookie, built on Nuxt's SSR-aware
useCookie. Cookies
work on both server and client with no fallback setup: the server reads the
request's Cookie header and the value is serialized into the payload for
hydration.
<script setup lang="ts">
import { } from 'kvantjs/nuxt'
import * as from 'kvantjs/schema'
const = ('locale', .().('en'))
</script>
<template>
< ="">
< ="en">English</>
< ="de">Deutsch</>
</>
</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 = ({
: .().('en'),
: .(['light', 'dark']).('light'),
})
. = { ...., : 'dark' }
.. = 'dark' // deeply reactive!Options
Options are a subset of Nuxt's useCookie parameters:
Prop
Type
const = (
'consent',
.().(false),
{ : 60 * 60 * 24 * 365, : 'lax' },
)Set options once for a component subtree using the provide function:
<script setup lang="ts">
import { } from 'kvantjs/nuxt'
({ : 60 * 60 * 24 * 365, : 'lax' })
</script>