Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/djaler/vue-use-route-query
A tiny Vue composable function to create a ref synced with vue router query
https://github.com/djaler/vue-use-route-query
composition-api query router vue vue-composition-api vue-router
Last synced: 9 days ago
JSON representation
A tiny Vue composable function to create a ref synced with vue router query
- Host: GitHub
- URL: https://github.com/djaler/vue-use-route-query
- Owner: Djaler
- License: other
- Created: 2022-04-13T14:49:10.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-22T09:51:55.000Z (about 1 year ago)
- Last Synced: 2024-11-08T23:58:51.342Z (9 days ago)
- Topics: composition-api, query, router, vue, vue-composition-api, vue-router
- Language: TypeScript
- Homepage: https://djaler.github.io/vue-use-route-query
- Size: 293 KB
- Stars: 29
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/vue-use-route-query)
[](https://bundlephobia.com/result?p=vue-use-route-query)
[](https://djaler.github.io/vue-use-route-query/#/)
# Vue Use Route Query
> A tiny Vue composable function to create a ref synced with vue router query.
## Install
> Works for Vue 2 and Vue 3 **within a single package** by the power of [vue-demi](https://github.com/vueuse/vue-demi)!
```sh
npm install --save vue-use-route-query
```
or
```sh
yarn add vue-use-route-query
```
or
```sh
pnpm install vue-use-route-query
```
## Usage
Simple example with a string parameter without any transformations
```ts
import { defineComponent } from 'vue'
import { useRouteQuery } from 'vue-use-route-query'
export default defineComponent({
setup() {
const foo = useRouteQuery('foo', ''); // Ref
const bar = useRouteQuery('bar', null); // Ref
foo.value = 'foo'; // Results in 'foo=foo' in the query
return {
foo,
bar,
}
}
})
```
More complex example with a transformer
```ts
import { defineComponent } from 'vue'
import { useRouteQuery, RouteQueryTransformer } from 'vue-use-route-query'
export default defineComponent({
setup() {
// This transformer will reverse the string because why not
const reverseTransformer: RouteQueryTransformer = {
fromQuery(query) {
return query.split('').reverse().join('');
},
toQuery(value) {
return value?.split('').reverse().join('');
}
}
const foo = useRouteQuery('foo', '', reverseTransformer);
foo.value = 'bar'; // Results in 'foo=rab' in the query
return {
foo,
}
}
})
```
A several transformers provided by the library out of the box:
* `integerTransformer`
```js
const foo = useRouteQuery('foo', 0, integerTransformer); // Ref
```
* `floatTransformer`
```js
const foo = useRouteQuery('foo', 0, floatTransformer); // Ref
```
* `booleanTransformer`
```js
const foo = useRouteQuery('foo', false, booleanTransformer); // Ref
```
* `enumTransformer` - stores the enum key in the query and maps it back to the enum value
```ts
enum Foo {
BAR,
BAZ
}
const foo = useRouteQuery('foo', Foo.Bar, enumTransformer); // Ref
foo.value = Foo.BAZ; // Results in 'foo=BAZ' in the query
```
### Navigation mode
By default, all changes are applied using `router.replace` to not create additional entries in history.
But you may configure this behaviour using `mode` option.
```ts
const foo = useRouteQuery('foo', '', { mode: 'push' });
const bar = useRouteQuery('bar', '', transformer, { mode: 'push' });
```
### Update awaiting
Query update is asynchronous by its nature, but sometimes you may want to wait for query to be updated before doing something. For example, you may want to fetch some data from the server based on the query. To do that, you can use `waitForQueryUpdate`:
```ts
import { defineComponent } from 'vue';
import { useRouteQuery, waitForQueryUpdate } from 'vue-use-route-query';
export default defineComponent({
setup() {
const foo = useRouteQuery('foo', '');
async function submit(value: string) {
foo.value = value;
await waitForQueryUpdate();
// Now the query is updated and you can do something with it
// For example, fetch some data from the server
fetch(`https://example.com/api?foo=${foo.value}`);
}
return {
foo,
submit,
};
},
});
```