{"id":19154308,"url":"https://github.com/baloise/vue-axios","last_synced_at":"2025-05-07T06:27:44.416Z","repository":{"id":48309609,"uuid":"352738167","full_name":"baloise/vue-axios","owner":"baloise","description":"A small wrapper library for the simple promise based HTTP client axios.","archived":false,"fork":false,"pushed_at":"2022-05-06T11:23:12.000Z","size":1278,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-19T19:05:37.496Z","etag":null,"topics":["axios","composition-api","http-client","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baloise.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-29T18:03:08.000Z","updated_at":"2024-11-20T16:14:17.000Z","dependencies_parsed_at":"2022-08-27T05:04:13.432Z","dependency_job_id":null,"html_url":"https://github.com/baloise/vue-axios","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baloise%2Fvue-axios","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baloise%2Fvue-axios/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baloise%2Fvue-axios/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baloise%2Fvue-axios/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baloise","download_url":"https://codeload.github.com/baloise/vue-axios/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252310978,"owners_count":21727517,"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":["axios","composition-api","http-client","vue","vuejs"],"created_at":"2024-11-09T08:26:23.865Z","updated_at":"2025-05-07T06:27:44.395Z","avatar_url":"https://github.com/baloise.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ctable align=\"center\" cellspacing=\"0\" cellpadding=\"0\" style=\"border: none;\"\u003e\n\u003ctr style=\"border: none;\"\u003e\n  \u003ctd style=\"border: none;\"\u003e\n    \u003cimg width=\"200px\" src=\"https://vuejs.org/images/logo.png\" /\u003e\n  \u003c/td\u003e\n  \u003ctd style=\"border: none;\"\u003e\n    \u003ch1 style=\"font-size: 10em\"\u003e+\u003c/h1\u003e\n  \u003c/td\u003e\n  \u003ctd style=\"border: none;\"\u003e\n    \u003cimg width=\"200px\" src=\"https://axios-http.com/assets/logo.svg\" /\u003e\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n# vue-axios\n\nA small wrapper library for the simple promise based HTTP client [axios](https://axios-http.com/).\n\n\u003e The library is made for [Vue 3.x.x](https://v3.vuejs.org/) and the [Composition API](https://v3.vuejs.org/api/composition-api.html).\n\n## Instalation\n\nInstall the library and axios with npm.\n\n```bash\nnpm install axios @baloise/vue-axios\n```\n\n## Use plugin\n\nImport the library into your `src/main.ts` file or any other entry point.\n\n```typescript\nimport { createApp } from 'vue'\nimport { vueAxios } from '@baloise/vue-axios'\n```\n\nApply the library to the vue app instance. The additional configuration have the type [AxiosRequestConfig](https://axios-http.com/docs/req_config/).\n\n```typescript\nconst app = createApp(App)\n\n// simple\napp.use(vueAxios)\n\n// additional configurations\napp.use(vueAxios, {\n  baseURL: 'http://api.my-site.com',\n})\n```\n\n## Interceptors\n\nUse the defined `$axios` instance. More to the intercepters can be found [here](https://axios-http.com/docs/interceptors/).\n\n```typescript\nimport { $axios } from '@baloise/vue-axios'\n\n// Add a request interceptor\n$axios.interceptors.request.use(\n  function (config) {\n    // Do something before request is sent\n    return config\n  },\n  function (error) {\n    // Do something with request error\n    return Promise.reject(error)\n  },\n)\n\n// Add a response interceptor\n$axios.interceptors.response.use(\n  function (response) {\n    // Any status code that lie within the range of 2xx cause this function to trigger\n    // Do something with response data\n    return response\n  },\n  function (error) {\n    // Any status codes that falls outside the range of 2xx cause this function to trigger\n    // Do something with response error\n    return Promise.reject(error)\n  },\n)\n```\n\n## Usage\n\n### Have multiple API's\n\nTo access multiple apis in your app it could be help full to create a new axios instance. However, if you only access one api configure it through the plugin options `defaults`.\n\nExport the new instance and use it in any component.\n\n```typescript\nimport { $axios } from '@baloise/vue-axios'\n\nexport const catApi = $axios.create({\n  baseURL: 'https://cat-fact.herokuapp.com',\n})\n\nexport const dogApi = $axios.create({\n  baseURL: 'https://dog-fact.herokuapp.com',\n})\n```\n\nUse the defined api instance in your components with the same interface that axios has.\n\n[Axios API Reference](https://axios-http.com/docs/api_intro/)\n\n```typescript\ncatApi.get('/facts')\n\ndogApi.post('/facts', {\n  fact: 'wuff',\n})\n```\n\n## Composition API\n\nTo use axios with the composition API import the `useAxios` composable function. `useAxios` return reactive values like `isLoading` or functions like `request` to execute a HTTP request.\n\nThe reactive values gets updated when executing a HTTP request.\n\n```typescript\nimport { computed, defineComponent } from 'vue'\nimport { useAxios } from '@baloise/vue-axios'\nimport { CatApi } from '../api/cat.api'\n\ntype CatFacts = { text: string }[]\n\nexport default defineComponent({\n  setup() {\n    const { get, data, isLoading, isSuccessful } = useAxios\u003cCatFacts, undefined\u003e(CatApi)\n\n    function callApi() {\n      get('/facts')\n    }\n\n    return {\n      callApi,\n      data,\n      isLoading,\n      isSuccessful,\n    }\n  },\n})\n```\n\n### useAxios\n\nThe `useAxios` function accepts a custom axios instance, otherwise it uses the global `$axios` instance.\nThe `$axios` instance is defined in the plugin options with the default config.\n\n```typescript\nimport { useAxios } from '@baloise/vue-axios'\n\nuseAxios()\nuseAxios(axiosInstance)\n```\n\n#### Reactive State\n\nThe `useAxios` function exposes the following reactive state.\n\n```typescript\nimport { useAxios } from '@baloise/vue-axios'\n\nconst {\n  data,\n  error,\n  headers,\n  status,\n  statusText,\n  abortMessage,\n\n  // state\n  isFinished,\n  isLoading,\n  isSuccessful,\n  hasFailed,\n  aborted,\n} = useAxios()\n```\n\n| State        | Type      | Description                                                       |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| data         | `any`     | `data` is the response that was provided by the server.           |\n| error        | `any`     | Promise Error.                                                    |\n| headers      | `any`     | `headers` the HTTP headers that the server responded with.        |\n| status       | `number`  | `status` is the HTTP status code from the server response.        |\n| statusText   | `string`  | `statusText` is the HTTP status message from the server response. |\n| abortMessage | `string`  | `abortMessage` is the provided message of the abort action.       |\n| isFinished   | `boolean` | If `true` the response of the http call is finished.              |\n| isLoading    | `boolean` | If `true` the response of the http call is still pending.         |\n| isSuccessful | `boolean` | If `true` the response successfully arrived.                      |\n| hasFailed    | `boolean` | If `true` the response has failed.                                |\n| aborted      | `boolean` | If `true` the request has been aborted by the user.               |\n\n#### Functions\n\nThe `useAxios` function exposes the following functions.\n\n```typescript\nimport { useAxios } from '@baloise/vue-axios'\n\nconst { request, get, post, put, patch, remove, head, options, abort } = useAxios()\n```\n\n##### request\n\nSimilar to the `axios.request` function. Moreover, besides the `AxiosRequestConfig` it also accepts `Promise\u003cRequestArgs\u003e` paramter too. `Promise\u003cRequestArgs\u003e` is the return type of the OpenAPI Codegen ParamCreator.\n\n```typescript\nrequest(config: AxiosRequestConfig)\nrequest(config: Promise\u003cRequestArgs\u003e)\n```\n\n##### get, post, put, patch, head, options, remove\n\nSimilar to the `axios` functions.\n\n```typescript\nget(url[, config])\nremove(url[, config])\nhead(url[, config])\noptions(url[, config])\npost(url[, data[, config]])\nput(url[, data[, config]])\npatch(url[, data[, config]])\n```\n\n##### abort\n\naborts the HTTP request.\n\n```typescript\nabort()\nabort(message: string)\n```\n\n## Open API Codegen\n\nIf your API uses Swagger and follows the OpenApi guidlines it is possible to generate a typescript axios SDK out of it.\n\nTo generate a SDK install the [OpenAPI Generator](https://www.npmjs.com/package/@openapitools/openapi-generator-cli)\n\n```bash\nnpm add -D @openapitools/openapi-generator-cli\n```\n\nExport the `swagger.json` or `swagger.yaml` from your API and run the following command.\n\n```bash\nopenapi-generator-cli generate -i path-to/swagger.yaml -g typescript-axios -o generated-sources/openapi --additional-properties=supportsES6=true,npmVersion=6.9.0,withInterfaces=true\n```\n\nMove the generated SDK code into your project. Then define the base configuration of your API and for each endpoint create the param creator.\n\nHave a look into our awesome [@baloise/vue-keycloak](https://github.com/baloise/vue-keycloak) library.\n\n```typescript\nimport { Configuration, UsersApiAxiosParamCreator } from './generated'\nimport { getToken } from '@baloise/vue-keycloak'\n\nconst myApiConfiguration = new Configuration({\n  basePath: '/my/api',\n  apiKey: async () =\u003e {\n    const token = await getToken()\n    return `Bearer ${token}`\n  },\n})\n\nexport const UsersApi = UsersApiAxiosParamCreator(myApiConfiguration)\n```\n\nImport the param creator `UsersApi` into the component and use them with the function `request` to send the HTTP request to the defined API.\n\n```typescript\nimport { defineComponent, ref } from 'vue'\nimport { UsersApi } from '../api/my.api'\nimport { useAxios } from '@baloise/vue-axios'\n\nexport default defineComponent({\n  setup() {\n    const { request } = useAxios()\n\n    async function onButtonClick() {\n      await request(UsersApi.getUserUsingGET('7'))\n    }\n\n    return { onButtonClick }\n  },\n})\n```\n\n# License\n\nApache-2.0 Licensed | Copyright © 2021-present Gery Hirschfeld \u0026 Contributors\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaloise%2Fvue-axios","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaloise%2Fvue-axios","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaloise%2Fvue-axios/lists"}