{"id":16577,"library":"vue-resource","title":"Vue Resource HTTP Client","description":"vue-resource is an HTTP client plugin for Vue.js, designed for making web requests and handling responses using XMLHttpRequest or JSONP. It supports the Promise API, URI Templates, and interceptors for both requests and responses. The package, currently at version 1.5.3 (last updated in 2021), was primarily built for Vue 1.x and Vue 2.x applications. It boasts compatibility with modern browsers (Firefox, Chrome, Safari, Opera, IE9+) and a compact size (14KB, 5.3KB gzipped). While it was once considered a de-facto 'official' HTTP client, its maintenance has largely ceased, especially with the advent of Vue 3, which encourages the use of alternatives like Axios or the native Fetch API. Its release cadence was irregular towards the end of its active lifecycle, with its last update occurring several years ago.","status":"abandoned","version":"1.5.3","language":"javascript","source_language":"en","source_url":"https://github.com/pagekit/vue-resource","tags":["javascript","vue","xhr","http","ajax","typescript"],"install":[{"cmd":"npm install vue-resource","lang":"bash","label":"npm"},{"cmd":"yarn add vue-resource","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-resource","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"CommonJS `require` can cause issues with TypeScript or modern build setups. The plugin needs to be explicitly installed using `Vue.use()` before the Vue instance is mounted.","wrong":"const VueResource = require('vue-resource');\nVue.use(VueResource);","symbol":"VueResource","correct":"import VueResource from 'vue-resource';\nVue.use(VueResource);"},{"note":"The `$http` instance is injected directly into Vue components and available via `this.$http` after the plugin is installed globally on the Vue constructor. It's not a named export.","wrong":"import { $http } from 'vue-resource';","symbol":"$http","correct":"this.$http.get('/someUrl').then(response => {\n  // ...\n});"},{"note":"For TypeScript projects, explicit type augmentation for `Vue` instance properties like `$http` might be necessary, especially if `@types/vue-resource` does not fully cover the global augmentation or if strict type checking is enabled.","symbol":"VueResourcePlugin","correct":"import VueResource from 'vue-resource';\n// In a TypeScript file where Vue.$http type needs augmentation\ndeclare module 'vue/types/vue' {\n  interface Vue {\n    $http: typeof VueResource.http;\n  }\n}"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueResource from 'vue-resource';\n\nVue.use(VueResource);\n\nnew Vue({\n  el: '#app',\n  data: {\n    message: 'Loading data...',\n    someData: null,\n    error: null,\n  },\n  mounted() {\n    // Example GET request\n    this.$http.get('https://jsonplaceholder.typicode.com/todos/1')\n      .then(response => {\n        // Handle success\n        this.message = 'Data loaded!';\n        this.someData = response.body; // response.body contains the parsed data\n      }, response => {\n        // Handle error\n        this.message = 'Error loading data.';\n        this.error = response.statusText;\n        console.error('Request failed:', response);\n      });\n\n    // Example POST request\n    this.$http.post('https://jsonplaceholder.typicode.com/posts', { title: 'foo', body: 'bar', userId: 1 })\n      .then(response => {\n        console.log('POST successful:', response.body);\n      })\n      .catch(error => {\n        console.error('POST failed:', error);\n      });\n  },\n  template: `\n    <div id=\"app\">\n      <h1>Vue Resource Example</h1>\n      <p>{{ message }}</p>\n      <div v-if=\"someData\">\n        <h2>Fetched Data (GET)</h2>\n        <pre>{{ JSON.stringify(someData, null, 2) }}</pre>\n      </div>\n      <div v-if=\"error\">\n        <p style=\"color: red;\">Error: {{ error }}</p>\n      </div>\n    </div>\n  `,\n});","lang":"typescript","description":"This quickstart demonstrates how to install `vue-resource` as a Vue plugin, perform basic GET and POST HTTP requests within a Vue component's lifecycle hook, and handle both successful responses and errors by updating component data."},"warnings":[{"fix":"Replace the `progress` option with `uploadProgress` and `downloadProgress` methods in your request configuration. These methods receive a standard `ProgressEvent`.","message":"The `progress` option for tracking upload/download progress was deprecated in v1.5.0. Developers should now use `uploadProgress` and `downloadProgress` options for more granular control over progress events.","severity":"breaking","affected_versions":">=1.5.0"},{"fix":"Update interceptor functions to `return response` or `return Promise.resolve(response)` instead of invoking `next(response)` or `next(request)`. Similarly, error paths should `return Promise.reject(error)`.","message":"In v1.4.0, the mechanism for passing responses in interceptors changed. Instead of calling `next(...)`, interceptors are now expected to `return` the response or a promise resolving with the response.","severity":"breaking","affected_versions":">=1.4.0"},{"fix":"For Vue 3 applications, migrate to modern HTTP clients like Axios or the native Fetch API, which are actively maintained and designed for the Vue 3 ecosystem. If migrating a Vue 2 app, consider the Vue 3 Migration Build (`@vue/compat`) to ease the transition while replacing deprecated functionalities.","message":"vue-resource is primarily designed for Vue 1.x and 2.x. It is not officially compatible with Vue 3. Using it in a Vue 3 project will lead to significant compatibility issues and is strongly discouraged.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Developers should avoid starting new projects with `vue-resource`. For existing projects, consider migrating to actively maintained alternatives like Axios or the native Fetch API to ensure ongoing compatibility, security updates, and access to new features.","message":"The package has not seen significant updates or active maintenance since 2021 (last release 1.5.3 in June 2021). Its 'official recommendation' status was retired by the Vue core team in 2016.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `Vue.use(VueResource)` is called before creating your Vue instance. For TypeScript, add a declaration file (e.g., `vue-shims.d.ts`) to augment the `Vue` type with `$http`: `declare module 'vue/types/vue' { interface Vue { $http: typeof VueResource.http; } }`.","cause":"The `vue-resource` plugin was not properly installed or registered with the Vue instance before usage, or TypeScript is not aware of the augmented `$http` property on the Vue prototype.","error":"Property '$http' does not exist on type 'Vue'."},{"fix":"If using CommonJS, ensure `Vue` is imported and defined before `Vue.use(VueResource)`. If in a browser, confirm Vue is loaded via a `<script>` tag before `vue-resource`, or use an ES module setup with a bundler.","cause":"This typically happens in a CommonJS (require) environment or when the Vue library is not globally available (e.g., in a browser via a `<script>` tag) before `vue-resource` attempts to register itself.","error":"ReferenceError: Vue is not defined"},{"fix":"Verify that the code accessing `this.$http` is within a Vue component method, lifecycle hook, or a computed property. Confirm `Vue.use(VueResource)` is executed at the application's entry point before any components are initialized.","cause":"This error often occurs when `this.$http` is accessed outside of a Vue component context, or when `vue-resource` has failed to install correctly, leading `this.$http` to be `undefined`.","error":"TypeError: Cannot read property 'then' of undefined"}],"ecosystem":"npm"}