Skip to content

vue-qs v0.1.18


vue-qs / queryRef

Function: queryRef()

queryRef<T>(parameterName, options): QueryRefReturn<T>

Defined in: composables/use-query-ref.ts:90

Manages a single query parameter as a Vue Ref with URL synchronization

Type Parameters

T

T

The type of the parameter value

Parameters

parameterName

string

The name of the URL query parameter

options

QueryRefOptions<T> = {}

Configuration options for the parameter

Returns

QueryRefReturn<T>

Reactive ref that stays in sync with the URL parameter

Example

typescript
import { queryRef, numberCodec } from 'vue-qs';

// Simple string parameter with default
const searchQuery = queryRef('q', {
  defaultValue: ''
});

// Number parameter with custom codec
const currentPage = queryRef('page', {
  defaultValue: 1,
  codec: numberCodec,
  shouldOmitDefault: true
});

// Update the URL by changing the ref value
searchQuery.value = 'hello world';
currentPage.value = 2;

Released under the MIT License.