I've been busy with this for quite some time and haven't e up with a solution. The problem is, I want my module built with Require JS and Vue/Vuex to municate with the outside world.

I don't want to use this

require(["myModule"],function(vm){
vm.$children[0].myMethod()
});

or jquery

// inside app
$(document).trigger("myEvent",payload);

// outside app
$(document).on("myEvent",myHandler);

This is my custom Element

<div id="app">

    <customer-select></customer-select>

</div>

and my main.js. I'm using requirejs to load my AMD modules

define(["./app2/app"], function (CustomerSelectApp) {
    CustomerSelectApp.init("#app");
});

my app.js

define([ "vue", "jquery", "webjars/nm-customer-select/nm-customer-select",
    "css!bootstrap-css" ],

function(Vue, $, customerSelect) {

return {
    init : function(targetElement) {
        return new Vue({
            el : targetElement,


            ponents : {
                customerSelect : customerSelect
            }

        });
    }

};

});

Is there any way to make the app/ponent municate with the outside world via an event or a reference that I pass in?

Specifically. I want to make a selection in my Vue app and let another App on the same page know about it an receive the selected data to process it further

I've been busy with this for quite some time and haven't e up with a solution. The problem is, I want my module built with Require JS and Vue/Vuex to municate with the outside world.

I don't want to use this

require(["myModule"],function(vm){
vm.$children[0].myMethod()
});

or jquery

// inside app
$(document).trigger("myEvent",payload);

// outside app
$(document).on("myEvent",myHandler);

This is my custom Element

<div id="app">

    <customer-select></customer-select>

</div>

and my main.js. I'm using requirejs to load my AMD modules

define(["./app2/app"], function (CustomerSelectApp) {
    CustomerSelectApp.init("#app");
});

my app.js

define([ "vue", "jquery", "webjars/nm-customer-select/nm-customer-select",
    "css!bootstrap-css" ],

function(Vue, $, customerSelect) {

return {
    init : function(targetElement) {
        return new Vue({
            el : targetElement,


            ponents : {
                customerSelect : customerSelect
            }

        });
    }

};

});

Is there any way to make the app/ponent municate with the outside world via an event or a reference that I pass in?

Specifically. I want to make a selection in my Vue app and let another App on the same page know about it an receive the selected data to process it further

• javascript
• jquery
• requirejs
• vue.js
• vuex

• Maybe this is a little late, but how about using some storage as mediator? something like sessionStorage or localStorage? the problem is that you'll need to keep checking the localstorage to see if there's any data, so you might create maybe a global Window's function and call it inside your ponent with window.readData or something like that. – Javis Perez Commented Sep 28, 2016 at 2:02

1 Answer 1

You can try storing the root Vue node as a global variable using window.name

define(["./app2/app"], function (CustomerSelectApp) {
    window.VueRoot = CustomerSelectApp.init("#app");
});

Then in other parts of your application you can have

VueRoot.method();
VueRoot.data = value;
VueRoot.$emit('event', data);

I would suggest only doing this with your root node as it would pollute your global namespace otherwise.