Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Stream an API using RxJS into a Vue.js Template

    John LindquistJohn Lindquist

    You can map remote data directly into your Vue.js templates using RxJS. This lesson uses axios (and the vue-axios library which exposes axios on components as this.$http) and wraps the remote call inside of an Observable to provide the data into the template

    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:06 I'm also going to install axios, and vue-axios. I can figure these by importing axios from axios, and importing vue-axios from vue-axios, and telling vue to use vue-axios and provide axios.

    00:20 This simply gives me on my components and HTTP servers to make the request that I need. Let me start with a stream called people, and say this is observable from this.HTTP, $HTTP and get, and the data I want to get is https://starwars.egghead.training/people/one.

    00:49 All I have to do is add this people to a returned value here that I can render out people. It save, and you'll see the response is all of this, and what I really want off of this is the data, I can tell my stream to pluck the data off the response. It save, and you can see the data we have here.

    01:16 Since what I really want is this name, I can do a comma name, it save and you'll see Luke Skywalker. That's all from the stream observable from, and this is just axios, which is like fetch with a lot more features, this is returning a promise, we're wrapping the promise within observable, plucking the data may be off of it.

    01:37 Then, we're passing this in to the return object, then simply rendering it up.

    Discuss

    Discuss