Tutorial

Integrating RxJS with Vue.js

Published on January 16, 2017
author

Joshua Bemenderfer

Integrating RxJS with Vue.js

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

If you come from Angular-land or are a fan of functional programming, you’re probably pretty familiar with the concept of observable streams, as implemented most commonly in JS-land by RxJS. Here’s a quick guide on using RxJS with Vue.

Installation

Now, Vue doesn’t come with RxJS 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, install vue-rx and rxjs via Yarn or NPM.

# Yarn
$ yarn add vue-rx rxjs

# NPM
$ npm install vue-rx rxjs --save

In your app, you can then use the plugin by importing RxJS and registering the plugin with Vue using Vue.use()

import Vue from 'vue';
import Rx from 'rxjs/Rx';
import VueRx from 'vue-rx';

// VueRx can use libraries other than RxJS
// that implement the observable interface.
Vue.use(VueRx, Rx)

Automatically-Managed Subscriptions

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

To do this with vue-rx, simply add a subscriptions object to your component that maps parameters to your Observables. The end result is comparable to Angular 2’s async pipe.

MyComponent.vue
<template>
  <p>{{message$}}</p>
</template>

<script>
  import Rx from 'rxjs/Rx';

  const messageObservable = Rx.Observable.from(
    ['Example Message', 'Example Message Final']
  );

  export default {
    subscriptions: {
      message$: messageObservable
    }
  }
</script>

The message$ variable should now contain the value Example 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 through this.$observables.message.

As with the Angular 2 community, in Vue projects it is generally expected that variables that are observable subscriptions are suffixed with a dollar sign ($).

Other Features

Unique Observables

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

export default {
  subscriptions() {
    return {
      message$: messageObservable
    }
  }
}

Manual Subscription

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

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Joshua Bemenderfer

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel