https://github.com/tato30/vue-query-param
Vue directive for bind a model with a URL's query param
https://github.com/tato30/vue-query-param
directive query-param vue
Last synced: 2 months ago
JSON representation
Vue directive for bind a model with a URL's query param
- Host: GitHub
- URL: https://github.com/tato30/vue-query-param
- Owner: TaTo30
- Created: 2024-02-17T02:01:51.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-26T21:37:32.000Z (about 2 years ago)
- Last Synced: 2025-10-24T17:55:16.558Z (8 months ago)
- Topics: directive, query-param, vue
- Language: TypeScript
- Homepage:
- Size: 79.1 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-query-param
## Introduction
`vue-query-param` is a vue directive that binds and syncs a `ref` model to the URL's query paramaters.
## Installation
```console
npm i vue-query-param
```
```console
yarn add vue-query-param
```
## Basic Usage
```vue
import { vQueryParam } from "vue-query-param";
const filter = ref("")
```
## Hook Arguments
### Directive argument
`arg` must be the *key* of the model in the URL, for example, this code:
```vue
```
Will produce this URL `https:////?q=&filter=`
### Directive value
In the most basic cases you only need to use a `ref` directly in the directive value but for more complex cases you can use an object with the following options:
```js
{
model: ref_property,
format: (val) => val.toString(),
callback: (val) => ref_property = val
}
```
#### model
The `ref` field that `v-query-param` will bind on the URL.
#### format
A `function` to format the model value, useful when the value is not a primitive type or just masking the value when is set in the URL.
#### callback
A `function` that is called during the `created` hook, use this if you want to set at your `ref` field the current URL value before mounting the template.
## Examples
A common use case could be a search input, usually you want to store in URL the user's input, so when the page is reloaded you still have the user's input.
```vue
import { vQueryParam } from "vue-query-param";
const search = ref("")
```
For complex types as dates, you can use the `format` and `callback` options so you can store in URL the date in a specific format and retrieve it again during the `created` hook by parsing the formatted value.
```vue
import { vQueryParam } from "vue-query-param";
const date = ref()
```