vue-api v0.0.3

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