Configure Vue.js to Enable RxJS Streams
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.
Instructor: [00:00] After creating a new project with a vue-cli, just go ahead and npm install RxJS and vue-rx. Then, we can simply import rx from RxJS, import vue-rx from vue-rx, tell vue to use vue-rx, and provide rx as the library.
[00:25] These lines are all the configuration you need, and additional capabilities are added to your components. In here, we can create a subscriptions object and create an interval property. Dollar signs are a standard naming conventions for naming streams.
[00:44] We'll import observable from RxJS and set the value to observable.interval with a time of one second. Then we can simply render out this interval. Here, seize the {interval dollar}, hit save, and you'll see an interval counting up from zero and changing every second.
[01:07] To give myself a couple components and some CSS to work with, I'm going to install beautify as well. I'll import the beautify style sheet, so import beautify lib beautify.css. Then I'll import beautify from beautify, and I'll use beautify here as well. This will simply give us some default styling and some components to use as we write our code.
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)
Thanks Christopher, that works, and is very important info.
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'
Thanks Christopher!
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>
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 inObservable.interval is not a functionin the console. Any ideas?