Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Configure Vue.js to Enable RxJS Streams

    John LindquistJohn Lindquist

    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.

    vueVue.js
    ^2.0.0
    rxjsRxJS
    ^5.0.0
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss