diff --git a/src/packages/vue/index.md b/src/packages/vue/index.md index 6d0718c54..b1e8219d0 100644 --- a/src/packages/vue/index.md +++ b/src/packages/vue/index.md @@ -92,4 +92,57 @@ class ApplicationUsingReactWindow extends Window { } ``` +## To communicate between Vue components in separate applications, you'll need to set up a Vue event bus and use OS.js built-in event handling and broadcasting. + +In the component you wish to broadcast events over OS.js: +``` javascript + methods: { + clickAction(m) { + this.$root.broadcast('highlight-node-event', m._id); + } + } +``` +In the component you wish to receive events from OS.js: +``` javascript + mounted() { + this.$root.$on("highlight-node-event", id => { + if (id == this.model._key) { + this.highlight = true; + } else { + this.highlight = false; + } + }); + }, +``` +In your OS.js application you can proxy events: +``` javascript + const Process = OSjs.require('core/process'); + ... + const vue = new Vue({ + el: container, + render: h => h(App), + methods: { + broadcast(n, args) { + // send message out + Process.message(n, args, {source: app}); + } + } + }); +``` + +``` javascript + /** + * Register events + */ + ["highlight-node-event"].forEach(n => + app._on(n, (...args) => { + vue.$emit(n, ...args); + }) + ); +``` + + + + + **That's it!** You now have a hello world application :)