{"id":21025947,"url":"https://github.com/nickforddev/vue-requests","last_synced_at":"2026-05-18T22:05:15.404Z","repository":{"id":105962406,"uuid":"105198838","full_name":"nickforddev/vue-requests","owner":"nickforddev","description":"A simple, flexible fetch plugin for Vue.js","archived":false,"fork":false,"pushed_at":"2018-03-29T16:31:38.000Z","size":1511,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-09T19:06:55.575Z","etag":null,"topics":["fetch","fetch-api","request","requests","vue","vue-plugin","vue-requests","vue2","vuejs"],"latest_commit_sha":null,"homepage":"","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/nickforddev.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":"2017-09-28T21:00:25.000Z","updated_at":"2018-10-28T15:10:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"417d4dd8-68ac-4d2e-9937-228ba6b8177c","html_url":"https://github.com/nickforddev/vue-requests","commit_stats":null,"previous_names":["nickforddesign/vue-req","nickforddesign/vue-requests"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickforddev%2Fvue-requests","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickforddev%2Fvue-requests/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickforddev%2Fvue-requests/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickforddev%2Fvue-requests/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nickforddev","download_url":"https://codeload.github.com/nickforddev/vue-requests/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243130442,"owners_count":20241162,"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":["fetch","fetch-api","request","requests","vue","vue-plugin","vue-requests","vue2","vuejs"],"created_at":"2024-11-19T11:40:42.486Z","updated_at":"2026-05-18T22:05:15.367Z","avatar_url":"https://github.com/nickforddev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-requests\n\n[![Version](https://img.shields.io/npm/v/vue-requests.svg)](#)\n[![Build](https://travis-ci.org/nickforddesign/vue-requests.svg?branch=master)](#)\n[![Coverage Status](https://coveralls.io/repos/github/nickforddesign/vue-requests/badge.svg?branch=master)](https://coveralls.io/github/nickforddesign/vue-requests?branch=master)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## Why?\n\nThe [fetch api](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) is awesome. For anyone who has worked with the [XMLHttpRequest api](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest), it's pretty clear that fetch is a big improvement. However, there are a few paint points to using it by itself:\n\n1. No timeout option, or hook\n1. No before hook\n1. Having to parse the response body on every request\n1. No way to use relative urls that differ from the client domain\n1. Having to use `JSON.stringify` on every request body\n\nThis plugin is a small Vue.js wrapper for the fetch api, with some improvements to make those points less painful.\n\n## Installation\n\n``` bash\n# install using npm\nnpm install --save vue-requests\n\n# or using yarn\nyarn add vue-requests\n```\n\n## Setup\n\n```js\nimport Vue from 'vue'\nimport VueRequests from 'vue-requests'\n\nVue.use(VueRequests)\n```\n\n## Usage\n\nSimplest example of a get request (the default method) in a Single File Component\n\n```js\nexport default {\n  mounted() {\n    this.$request('/data')\n  }\n}\n```\n\nExample of a post request with body\n\n```js\nexport default {\n  mounted() {\n    this.$request('/data', {\n      method: 'POST',\n      body: {\n        test: 123 // body will be automatically stringified\n      }\n    })\n  }\n}\n```\n\n# Options\n\n### root [String]\nThe root option allows usage of relative urls for a domain that is different from the client domain. \n\n### headers [Object]\nHeaders can contain any custom headers you'd like to include in your requests. The values will be used as-is to create a `new Headers()` instance, unless the value is a function, in which case it will be evaluated first. Use functions for values that may change over time, such as Vuex state.\n\n```js\nimport store from './store'\n\nconst options = {\n  headers: {\n    authorization() {\n      return store.getters.auth_token\n    },\n    something: 'You can use strings too'\n  }\n}\n\nVue.use(VueRequests, options)\n```\n\n### before [Function]\nThis function will be run before making the request. Use async/wait or return a promise if you want to complete something asynchronous before continuing. This is particularly useful for checking if you have expired tokens and refreshing them before a request.\n\nHere's a simplified example of using the before hook to check something before proceeding with the request:\n\n```js\nconst expires = '2017-09-30T01:44:19.273Z'\n\nconst options = {\n  async before() {\n    if (new Date(expires) \u003e= new Date()) {\n      await refreshToken()\n    }\n  }\n}\n\nVue.use(VueRequests, options)\n```\n\n### timeout [Function]\nTimeout hook to fire in the event of a timeout.\n\n```js\nconst options = {\n  timeout() {\n    alert('The request timed out.')\n  }\n}\n\nVue.use(VueRequests, options)\n```\n\n### timeout_duration [Number]\nDuration in ms for fetch timeout limit.\n\n```js\nconst options = {\n  timeout_duration: 25000\n}\n\nVue.use(VueRequests, options)\n```\n\n# Requests\nThe request function accepts the following parameters:\n\n## url [String]\nThe base url to make relative requests from. If an absolute url is passed to the request function, this will be overriden.\n\n## options [Object]\nThe options parameter accepts any of the options accepted by the [fetch api](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch), but the following \n\n1. method [String] - The method of the request (get (default), put, post, delete, options)\n1. body [Object|String] - The body of the request\n1. headers [Object] - Custom headers to add to the request\n\n## Response Headers\n\nIf you need access to the response headers, you can pass the `responseHeaders` option to the request method, which will result in the promise being resolved with an object containing body and headers.\n\n```js\nthis.$request('/data', {\n  responseHeaders: true\n})\n.then(response =\u003e {\n  console.log(response.body, response.headers)\n})\n```\n\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve demo at localhost:8080\nnpm start\n\n# run tests with jest\nnpm test\n\n# build dist version\nnpm run build\n```\n\nFor detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickforddev%2Fvue-requests","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnickforddev%2Fvue-requests","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickforddev%2Fvue-requests/lists"}