# router-proxy

Treat query params from vue-router as refs. When you update the ref, the url will update. Also includes
debouncing, type parsing, defaults, and more.

This is one of the more complicated libraries in this repo. There's a lot of logic around making sure
the page doesn't bounce around needlessly.

The refs generated by this library can be used in `v-model` directives, or like any other ref. The only difference
is that when they get updated, it changes the page.

## Usage

```typescript
import { useRouterProxy } from '@mbarlocker/vue-utils/router-proxy'

export default defineComponent({
	setup: () => {
		const routerProxy = useRouterProxy()

		const pages = 5

		// read 'page' from the query.
		// only take the first parameter found
		// if none found, use '123'
		const page = routerProxy.paramInt('id', '1')

		// read 'search' from the query.
		// debounce as its typed in from the user
		// 'replace' history instead of 'push' history
		const search = routerProxy.paramString('search', '', { debounce: true, replace: true })

		return {
			page,
			pages,
			search,
		}
	},
})
```

```html
<div>
	Page {{page}} of {{pages}}<br />
	<input v-model="search" type="text" />
	...
</div>
```