@smart-gate/vue-query-params
v1.0.5
Published
A Vue composable for synchronizing reactive objects with URL query parameters
Downloads
232
Readme
@smart-gate/vue-query-params
A Vue composable function for synchronizing reactive data with URL query parameters. This package allows you to keep your Vue application's state in sync with the URL, making it easier to share and manage state across different views and sessions.
Features
- Synchronize Vue reactive objects with URL query parameters.
- Custom serialization and deserialization.
- Configurable URL update behavior.
- Works with Vue 3 and Vue Router 4.
Installation
You can install the package via npm:
npm install @smart-gate/vue-query-params
or with yarn:
yarn add @smart-gate/vue-query-params
Usage
Importing
To use the composable function in your Vue component, import it as follows:
import { ref, onMounted } from 'vue';
import { useQueryParams } from '@smart-gate/vue-query-params';
interface IFilter {
name?: string;
age?: number;
gender?: string;
}
const filter = ref<IFilter>({});
const { initializeFiltersFromQuery } = useQueryParams(filter);
onMounted(() => {
initializeFiltersFromQuery();
});
Example Component
Here's a simple example of a Vue component using @smart-gate/vue-query-params:
<template>
<div class="w-screen font-mono h-screen flex items-center mx-auto justify-center">
{{ filter }}
<div class="flex flex-col gap-5">
<input v-model="filter.name" placeholder="Name" />
<input v-model="filter.age" placeholder="Age" type="number" />
<input v-model="filter.gender" placeholder="Gender" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useQueryParams } from '@smart-gate/vue-query-params';
interface IFilter {
name?: string;
age?: number;
gender?: string;
}
const filter = ref<IFilter>({});
const { initializeFiltersFromQuery } = useQueryParams(filter);
onMounted(() => {
initializeFiltersFromQuery();
});
</script>
API
useQueryParams<T>
Parameters
data: Ref<T>
: A VueRef
object containing the data to sync with the URL.options
(optional): Configuration options.serialize?: (key: keyof T, value: unknown) => string
: Custom serialization function.deserialize?: (key: keyof T, value: string) => unknown
: Custom deserialization function.updateUrl?: boolean
: Whether to automatically update the URL when the data changes.
Returns
initializeFiltersFromQuery
: Function to initialize data from the URL query parameters.updateQueryParams
: Function to manually trigger the update of query parameters.
Configuration
You can customize the serialization and deserialization functions by providing options:
const { initializeFiltersFromQuery } = useQueryParams(
filter,
{
serialize: (key, value) => JSON.stringify(value),
deserialize: (key, value) => JSON.parse(value),
updateUrl: true
}
);