Now, Vue doesn’t come withRxJS support out-of-the-box like other frameworks might, but it does provide an official plugin,vue-rx that adds the needed bindings.

To use it, installvue-rx andrxjs via Yarn or NPM.

# Yarn$yarnadd vue-rx rxjs# NPM$npminstall vue-rx rxjs--save

In your app, you can then use the plugin by importingRxJS and registering the plugin with Vue usingVue.use()

importVuefrom'vue';importRxfrom'rxjs/Rx';importVueRxfrom'vue-rx';// VueRx can use libraries other than RxJS// that implement the observable interface.Vue.use(VueRx,Rx)

The most commonly used feature of Rx-framework integrations is usually the ability to have components automatically subscribe and unsubscribe fromObservables when the component is created and destroyed. This avoids the memory leakages that commonly occur when subscribing to them manually.

To do this withvue-rx, simply add asubscriptions object to your component that maps parameters to yourObservables. The end result is comparable to Angular 2’sasync pipe.

<template><p>{{message$}}</p></template><script>importRxfrom'rxjs/Rx';const messageObservable=Rx.Observable.from(['Example Message','Example Message Final']);exportdefault{subscriptions:{message$: messageObservable}}</script>

Themessage$ variable should now contain the valueExample Message Final and be rendered in your template. The subscription will be automatically destroyed when the component unmounts.

The observable can be accessed inside the component throughthis.$observables.message.

Unique Observables

In the event that you’d like to subscribe to different observables for each instance of a component, you can instead set thesubscriptions property to a function that returns an object mapping data properties to observables, as shown below:

exportdefault{subscriptions(){return{message$: messageObservable}}}

Manual Subscription

You can subscribe to an observable inside of a component while still lettingvue-rx handle unsubscribing by usingthis.$subscribeTo(Observable, callback).

exportdefault{mounted(){this.$subscribeTo(messageObservable,function(val){console.log(val)})}}

• Vue-Rx Documentation
• RxJS 5 Documentation