# Cordova-broadcaster in vue js setup

**URL:** <https://forum.ionicframework.com/t/cordova-broadcaster-in-vue-js-setup/209412>\
**Category:** cordova\
**Created:** [May 12, 2021, 10:18am UTC](https://forum.ionicframework.com/t/cordova-broadcaster-in-vue-js-setup/209412 "2021-05-12T10:18:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joshi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/joshi/32/137574_2.png) [@Joshi](https://forum.ionicframework.com/u/Joshi)\
**Post date:** [May 12, 2021, 10:18am UTC](https://forum.ionicframework.com/t/cordova-broadcaster-in-vue-js-setup/209412/1 "2021-05-12T10:18:12Z")

</div>

Hello,

I am new to the ionic platform and currently trying my hand at ionic + vue js setup.  
In my app I am using the [GitHub - navarrojava/cordova-broadcaster: Cordova Plugin to allow message exchange between javascript and native (and viceversa)](https://github.com/navarrojava/cordova-broadcaster/) plugin and trying to read the incoming intent in my ionic setup.

but the issue is in my App.vue I am always getting the “broadcaster” as undefined. I have installed using the instructions and build also goes fine. Not sure what is the issue.

1. Is defining my bradcaster in App.vue the correct way?
2. What is causing it as undefined ?

I have the below written in my App.vue

```auto
import broadcaster from '@ionic-native/broadcaster'
.
.
export default {

  name: "App",
  components: {
    IonApp,
  },
  beforeCreate() {
    if (isPlatform('hybrid')) {
      const listener = function (e) {
        console.log("android.intent.category.BROWSABLE: " + e);
      };
      const isGlobal = true;
      broadcaster.addEventListener(
        "android.intent.category.BROWSABLE",
        isGlobal,
        listener
      );
    }
  },
};

```

---

<div class="post-metadata">

**Author:** ![codeluggage](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/codeluggage/32/137576_2.png) [@codeluggage](https://forum.ionicframework.com/u/codeluggage)\
**Post date:** [May 12, 2021, 12:51pm UTC](https://forum.ionicframework.com/t/cordova-broadcaster-in-vue-js-setup/209412/2 "2021-05-12T12:51:22Z")

</div>

I am not qualified to answer, but perhaps this can be of use anyway 🙂

If you are using Vue 3 you may need to write your code in `setup ()` instead of `beforeCreate ()`, because the `broadcaster` may not be ready yet.

---

<div class="post-metadata">

**Author:** ![Joshi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/joshi/32/137574_2.png) [@Joshi](https://forum.ionicframework.com/u/Joshi)\
**Post date:** [May 12, 2021, 4:29pm UTC](https://forum.ionicframework.com/t/cordova-broadcaster-in-vue-js-setup/209412/3 "2021-05-12T16:29:21Z")

</div>

Tried the above in create() but still getting “Msg: TypeError: Cannot read property ‘addEventListener’ of undefined”.

---

<div class="post-metadata">

**Author:** ![codeluggage](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/codeluggage/32/137576_2.png) [@codeluggage](https://forum.ionicframework.com/u/codeluggage)\
**Post date:** [May 13, 2021, 1:00am UTC](https://forum.ionicframework.com/t/cordova-broadcaster-in-vue-js-setup/209412/4 "2021-05-13T01:00:30Z")

</div>

@Joshi I don’t know about `create ()` 🤔 Did you try it in `setup ()`?

---

<div class="post-metadata">

**Author:** ![Joshi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/joshi/32/137574_2.png) [@Joshi](https://forum.ionicframework.com/u/Joshi)\
**Post date:** [May 14, 2021, 1:56pm UTC](https://forum.ionicframework.com/t/cordova-broadcaster-in-vue-js-setup/209412/5 "2021-05-14T13:56:18Z")

</div>

@codeluggage  
Thanks for your inputs. I did try that as well. No luck!

Instead I got it working in a simple manner using the already available Capacitor plugin : -

```auto
import { Plugins} from '@capacitor/core';
const { App } = Plugins;
.
.
.
setup() {
    
    if (isPlatform('hybrid')) {
           App.addListener('appUrlOpen', (data) => {
           console.log(data);
    });
    }

  },

```