> For the complete documentation index, see [llms.txt](https://api.beacon.li/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://api.beacon.li/native-routing-in-beacon/vue-js-native-routing-example.md).

# Vue JS - Native Routing Example

#### Enabling Native Routing with `@beacon.li/bar` in a Vue.js Component

If you're using Vue.js along with `vue-router` and you want to enable native routing for the Beacon widget, you can achieve this by integrating the `@beacon.li/bar` package with your Vue.js component. This allows you to control the behavior of the Beacon widget based on the current route using the `onMounted` lifecycle hook.

#### Integrating `@beacon.li/bar` with Vue Router

Here's how you can enable native routing with Beacon in your Vue.js component:

1. Import the necessary modules and hooks at the beginning of your component:

```
import { Beacon } from '@beacon.li/bar';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
```

2. Obtain the `router` object from `vue-router` using the `useRouter` hook:\
   Use the `onMounted` lifecycle hook to set up Beacon's router based on the current route. This allows you to navigate to different routes when the user interacts with the Beacon widget:

```
export default {
    setup() {
        const router = useRouter();
        onMounted(() => {
            Beacon.setRouter(path => {
                router.push(path);
            });
        })
    }
}
```

#### How It Works

* The `useRouter` hook provides you with the `router` object, which contains methods for navigating to different routes in your Vue.js application.
* In the `onMounted` hook, you call `Beacon.setRouter(path => router.push(path))`. This configures beacon to use the Vue Router's `router.push` method when navigating to different routes.
* Whenever the user interacts with the Beacon widget, it will trigger this router configuration, allowing you to seamlessly integrate beacon into your Vue.js application's navigation flow.

By following these steps, you can enable native routing for the Beacon widget in your Vue.js component, ensuring a consistent and user-friendly experience when users interact with the Beacon for support or communication.