---

title: UrlHandler

---

# UrlHandler

This component manages the browser URL parameters to preserve them through reloads and browser
history navigation. It allow to configure the default url parameter names using its attributes.
This component doesn't render elements to the DOM.

## Events

This component emits the following events:

- [`ParamsLoadedFromUrl`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`ExtraParamsLoadedFromUrl`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`UserOpenXProgrammatically`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

## See it in action

This component manages the browser URL parameters to preserve them through reloads and browser
history navigation. It allows you to configure the default URL parameter names using its attributes. This
component doesn't render elements to the DOM.

_Try to make some requests and take a look at the URL!_

```vue
<template>
  <UrlHandler />
</template>

<script setup>
import { UrlHandler } from "@empathyco/x-components/url-handler";
</script>
```

### Play with props

In this example, the `UrlHandler` component changes the following query parameter names:

- `query` to be `q`.
- `page` to be `p`.
- `filter` to be `f`.
- `sort` to be `s`.

_Try to make some requests and take a look at the URL!_

```vue
<template>
  <UrlHandler query="q" page="p" filter="f" sort="s" />
</template>

<script setup>
import { UrlHandler } from "@empathyco/x-components/url-handler";
</script>
```

### Play with events

The `UrlHandler` will emit the `ParamsLoadedFromUrl` when the page is loaded.

The `UrlHandler` will emit the `ExtraParamsLoadedFromUrl` when the page is loaded with an extra
param configured and with a value in the URL.

The `UrlHandler` will emit the `UserOpenXProgrammatically` when the page is loaded with a query in
the URL.