vue-qs v0.1.18

---

vue-qs / queryReactive

Function: queryReactive()

queryReactive<TSchema>(parameterSchema, options): QueryReactiveReturn<TSchema>

Defined in: composables/use-query-reactive.ts:71

Manages multiple query parameters as a single reactive object with URL synchronization

Type Parameters

TSchema

TSchema extends QueryParameterSchema

The schema type defining all parameters

Parameters

parameterSchema

TSchema

Schema defining configuration for each parameter

options

QueryReactiveOptions = {}

Global options for the reactive query state

Returns

QueryReactiveReturn<TSchema>

Reactive state object that stays in sync with the URL

Example

import { queryReactive, numberCodec, booleanCodec } from 'vue-qs';

const querySchema = {
  search: {
    defaultValue: '',
    shouldOmitDefault: true
  },
  page: {
    defaultValue: 1,
    codec: numberCodec
  },
  showDetails: {
    defaultValue: false,
    codec: booleanCodec
  },
} as const;

const queryState = queryReactive(querySchema, {
  historyStrategy: 'replace'
});

// Access reactive values
console.log(queryState.search, queryState.page, queryState.showDetails);

// Update values
queryState.search = 'hello';
queryState.page = 2;