Vue-Api
Simple wrapper for your models/services in Vue.js
Access your data models through your Vue.js components without unnecessary file imports.
Install
npm i --save vue-api
Usage
Example repo: https://github.com/Metnew/vue-api/tree/example
Add VueApi to your app:
index.js
import Vue from 'vue';
import VueApi from 'VueApi';
import API from './api.js';
Vue.use(VueApi(api, options)); //setup VueApi
// more about options below
Where api.js looks like:
api.js
API object have to looks like this:
export default const {
AuthSvc: {
getUser : async() => {
let response = await fetch('http://example.com');
let data = await response.json();
return data;
}
},
UserSvc: {
getUserStuff: async() => {
//your code here
}
}
}
And now you can access your API through components without imports:
export default {
name: 'Dashboard',
data() {
return {};
},
created() {
console.log('Dashboard is created')
},
methods: {
fetchData: async function() {
let data = await this.$root.api.getUser();
return data
}
}
};
Options
There is only one option:
-
options.forEvery (default: false) - allows to access API object without $root component, like:
// component code methods: { fetchData: async function() { let data = await this.api.getUser(); return data } } // component code
Not recommended. In this case API property will be mapped to every Vue component of your app.
Just ~20 lines of code.
Author
Vladimir Metnew. https://github.com/Metnew
License
MIT