How to Create a JSON-RPC Client for Vue.js
With some help from jayson
Post by Pedro Resende on the 9 of July of 2018 at 13:49
Tags: json-rpcjaysonvuevue.js
Today, I had to implement a JSON-RPC client for the Vue.js project I'm working on. Since there wasn't any library available, I thought it would be a good idea to return to the community with a custom made a library to help others.
I've started by by installing a very well knowned library called Jayson. This library was an implementation of JSON-RPC for client and server side for node.js, the only thing I had to do was import it to Vue.js.
I've started by creating a new file, with the following:
'use strict';
import jayson from 'jayson/lib/client';
export default {
install: function(Vue, url = url, ssl = false) {
let client = jayson.http({
host: url
});
if (ssl) {
client = jayson.https({
host: url
});
}
Object.defineProperty(Vue.prototype, '$JaysonRPC', { value: client });
}
};
then, to allow it to be used in all the project, I've open my main.js file and imported this new library
import JaysonRPC from 'jayson-rpc-vue';
Vue.use(JaysonRPC, '<URL>', false);
Finally, inside my App.vue file I only have to call it by using
this.$JaysonRPC.request('method_name', payload, (err, response) => {
if (err) throw err;
console.log(response.result); // 2
});
That's it, if any one need this library, it's already available on npm or on github.
Any suggestions of improvement are welcome.
NOTE (12-07-2018): Since jayson library had some limitations (missing credentials), I've decided to create a new one based on fetch.js, it's available on npm or on github.