wi12.unix7.org

Using this plugin you can do remote procedure call into any component with one shared method like

this.$jclient.request('add', { x: 1, y: 2 }, function(err, res) {
      if(!err) { 
         .....
      }
})

jvue.js

'use strict'
 
import jayson from 'jayson/lib/client/browser'
import axios from 'axios'
 
var createTransport = function(url) {
    return function(request, callback) {
        axios
            .post(url, request,
                    { transformResponse: [function (data) {
                        return data
                    }]}
            )
            .then(function(res) {
                callback(null, res.data)
            })
            .catch(function(err) {
                callback(err)
            })
    }
}
 
var client = function(url) {
    var transport = createTransport(url)
    return jayson(transport, {})
}
 
export default {
  install: function(Vue, url) {
    Object.defineProperty(Vue.prototype, '$jclient', { value: client(url) })
  }
}

app.js

import Vue from 'vue'
import App from './App.vue'
 
import Jvue from './jvue'
Vue.use(Jvue, 'https://api.random.org/json-rpc/1/invoke')
 
const app = new Vue({
    el: '#app',
    render: function(h) {
                return h(App)
    },
    components: { App }
})

App.vue

<template>
    <div>
        <button class="button" v-on:click="getRandom">Update</button>
        <p>
            <pre>{{data}}</pre>
        </p>
    </div>
</template>
 
<script>
export default {
    data: function() {
        return {
            data: {}
        }
    },
    methods: {
        getRandom() {
            this.$jclient.request('generateIntegers',
                {
                    apiKey: 'cd56b681-c001-4178-801e-53b407xxxxxx',
                    n: 3,
                    min: 10,
                    max: 99
                },
                (err, response) => {
                    if (!err)
                        this.data = response
                }
            )
        }
 
    }
}
</script>