vuqsType-safe query state for Vue.

The URL is the single source of truth for view state. Typed, reactive, and bound to your router.

🔗
Typed state in the URL
A ref bound to a query param. It writes the URL, and the URL writes it back.
🧬
Not everything is a string
A codec turns ?page=2 into the number 2 and back. Built-ins cover common types, and you can define your own.
🪝
It behaves like a ref
v-model, page++, whatever you'd do to a ref. Simultaneous writes end up in one navigation.
🧭
Your router does the navigating
vuqs builds the next query and an adapter hands it to your router. vue-router's is included.
🧩
Modules for everything else
The core does URL state. Anything on top is a module you compose with .use(), including your own.
🧪
Testing and debugging
A testing adapter for asserting URL writes, and structured debug events when something looks wrong.

Put view state in the URL

Search, filters, sort, and pagination all belong in the query string. vuqs binds them to typed, reactive refs: you read values back as the types you declared, and write them like any ref.

vue

<script setup lang="ts">
import { codecs, useQueryState } from '@vuqs/core'

const search = useQueryState('q', codecs.string.withDefault(''))
const page = useQueryState('page', codecs.integer.withDefault(1))
</script>

<template>
  <input v-model="search" placeholder="Search…">
  <button @click="page++">Next page</button>
  <p>Searching “{{ search }}” on page {{ page }}</p>
</template>

TIP

New here? Start with Installation, then read Concepts for codecs, params, schemas, and writes.

vuqsType-safe query state for Vue.

Typed state in the URL

Not everything is a string

It behaves like a ref

Your router does the navigating

Modules for everything else

Testing and debugging

Put view state in the URL ​

Put view state in the URL