Configure Vue.js to Enable RxJS Streams

Share this video with your friends

To add RxJS to Vue.js you install the library vue-rx as well as rxjs and configure Vue.js to use them together. Once setup, you can then create a subscriptions object on your components and return streams to render inside of your templates.

Jonathan Battle

~ 7 years ago

I can't seem to get past importing RXJS. I've installed the libs and then imported them in to main.js, and in to my component as instructed but when trying to use Observable.interval(1000) results in Observable.interval is not a function in the console. Any ideas?

Chris Child

~ 7 years ago

I had the same problem, I think it is because you are using version 6 of rxjs and this tutorial is using version 5.

What I had to do was import interval rather than Observable.

So change the import to import {interval} from 'rxjs'

Then use interval directly so use interval(1000) rather than Observable.interval(1000)

Evan Payne

~ 7 years ago

Thanks Christopher, that works, and is very important info.

Paul Perry

~ 6 years ago

Great course - going through the coding now after watching it through once.

In addition to the above, the buefy css can be imported as follows:

import 'buefy/dist/buefy.css'

Matt Lindell

~ 6 years ago

Thanks Christopher!

Wahid Nory

~ 5 years ago

I couldn't get this example to work as described in the comments. Maybe this lesson needs an update?

What worked for me was the following.

import { interval } from 'rxjs'

export default {
  subscriptions: function() {
    return {
      interval$: interval(1000)
    }
  }
}
</script>