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.