{"id":22589057,"url":"https://github.com/jwhittle933/vue-external-api","last_synced_at":"2025-03-28T17:44:59.862Z","repository":{"id":97531426,"uuid":"292320265","full_name":"jwhittle933/vue-external-api","owner":"jwhittle933","description":"External Resource Management Plugin for Vue","archived":false,"fork":false,"pushed_at":"2020-09-03T12:44:36.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-02T18:33:07.542Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jwhittle933.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-02T15:22:33.000Z","updated_at":"2020-09-03T12:44:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"cf77203d-e870-46a8-b82c-1da9c1198609","html_url":"https://github.com/jwhittle933/vue-external-api","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwhittle933%2Fvue-external-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwhittle933%2Fvue-external-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwhittle933%2Fvue-external-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwhittle933%2Fvue-external-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jwhittle933","download_url":"https://codeload.github.com/jwhittle933/vue-external-api/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246073859,"owners_count":20719559,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-08T08:12:05.227Z","updated_at":"2025-03-28T17:44:59.595Z","avatar_url":"https://github.com/jwhittle933.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ExAPI (vue-external-api)\nExAPI is a Vue plugin for managing external resources conveniently. The intent is to expose your request layer to the Vue instance, with the potential to connect it to Vuex and VueRouter logic.\n\n## Example\n```js\n// main.js\nimport ExAPI from 'vue-external-api'\nimport router from './path/to/router.js'\nimport store from './path/to/store.js'\nimport requestLayer from './path/to/requestLayer.js'\n\nconst exAPI = new ExAPI({ router, store, requestLayer })\nVue.use(exAPI)\n\n// someComponent.js\nexport default {\n  data() {\n    return {\n      pageNumber: 1,\n    }\n  },\n  created() {\n    this.$resources.blog.list(this.pageNumber)\n    // =\u003e [BlogPost, BlogPost, ...]\n\n    this.$resources.blog.featured()\n    // =\u003e [BlogPost, BlogPost, BlogPost]\n  }\n}\n```\n\n## Arguments\nThe ExAPI class accepts an objeect with three keys: router, store, and requestLayer. Each of these will be enumerated below.\n\n### Request Layer\nThe request layer that ExAPI accepts is an object that contains all the fetching logic required for your app. The layer itself can contain any logic you need, i.e., axios requests, S3 bucket fetches, etc. The request layer object must look like this:\n```js\n{\n  init: (Store, resourceName) =\u003e {\n    // initialization logic here\n    // init will be called once for every resource under handlers,\n    // and the resourceName will be the key,\n    // i.e., \"blog\"\n  },\n  routing: {\n    // http response codes with routing logic\n    // if this type of routing isn't necessary, you can exclude this field\n    // as well as the Router from ExAPI.\n    200: Router =\u003e {},\n    401: Router =\u003e {},\n    404: Router =\u003e {},\n  },\n  handlers: {\n    // each key under handlers is a scoped block of requests.\n    blog: {\n      featured: Store =\u003e {},\n      list: (Store, pageNumber) =\u003e {}\n    },\n    comments: {\n      listByBlogId: (Store, id) =\u003e {}\n    }\n  }\n}\n\n```\n\n### Router\nExAPI accepts a Vue Router instance, and will pass it to your navi\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwhittle933%2Fvue-external-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjwhittle933%2Fvue-external-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwhittle933%2Fvue-external-api/lists"}