Route Params

Bind Vue state to Nuxt route params with useRouteParams.

useRouteParams binds state to the route params, the dynamic segments of the route (/users/[id]). Useful when an identifier belongs in the path rather than the query string.

<script setup lang="ts">
import {  } from 'kvantjs/nuxt'
import * as  from 'kvantjs/schema'

// Route: /users/[id]
const  = ('id', .())
</script>

<template>
  <>User #{{  }}</>
</template>

Writing a param navigates to the updated path:

id.value = '42' // navigates to /users/42

Route params are only as writable as your route definitions allow. Writing a param not present in the current route's pattern has no effect on the path; for values that don't belong in the path, prefer query parameters.

Repeatable params work too:

// Route: /docs/[[...slug]]
const  = ('slug', .(.()).([]))

Key maps bind several params at once:

// Route: /[org]/[repo]
const  = ({
  : .(),
  : .(),
})

Options

Prop

Type

Set options once for a component subtree using the provide function:

<script setup lang="ts">
import {  } from 'kvantjs/nuxt'

({ : 'push' })
</script>

On this page