@smart-gate/vue-query-params v1.0.5

@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 Vue Ref 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
   }
);