[Vue-rx] Stream an API using RxJS into a Vue.js Template

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

Install:

npm i --save axios vue-axios

main.js:

import 'buefy/lib/buefy.css'

import Vue from 'vue'

import App from './App.vue'

import Rx from 'rxjs'

import VueRx from 'vue-rx'

import Buefy from 'buefy'

import Axios from 'axios';

import VueAxios from 'vue-axios'

Vue.use(VueRx, Rx)

Vue.use(Buefy)

Vue.use(VueAxios, Axios)

Vue.config.productionTip = false

new Vue({

  render: h => h(App)

}).$mount('#app')

app.vue:

<template>

  <section class="section">

    <h2>

      {{people$}}

    </h2>

  </section>

</template>

<script>

import {  from } from 'rxjs';

import { pluck } from 'rxjs/operators';

export default {

  name: 'app',

  subscriptions() {

    const people$ = from(

      this.$http.get(

        "https://starwars.egghead.training/people/1"

      )

    ).pipe(

      pluck('data', 'name') // Get response.data.name

    )return {

      people$

    }

  }

};

</script>