[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>