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';

1. 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.