Vue Resource HTTP Client

Common errors

• Property '$http' does not exist on type 'Vue'.

  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.
  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; } }`.

• ReferenceError: Vue is not defined

  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.
  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.

• TypeError: Cannot read property 'then' of undefined

  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`.
  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.

Warnings

• breaking 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.
  Fix: Replace the `progress` option with `uploadProgress` and `downloadProgress` methods in your request configuration. These methods receive a standard `ProgressEvent`.
• breaking 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.
  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)`.
• gotcha 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.
  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.
• deprecated 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.
  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.

Install

• npm install vue-resource npm
• yarn add vue-resource yarn
• pnpm add vue-resource pnpm

Imports

• VueResource
  wrong:

  const VueResource = require('vue-resource');
  Vue.use(VueResource);

  correct:

  import VueResource from 'vue-resource';
  Vue.use(VueResource);

  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.
• $http
  wrong:

  import { $http } from 'vue-resource';

  correct:

  this.$http.get('/someUrl').then(response => {
    // ...
  });

  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.
• VueResourcePlugin

  import VueResource from 'vue-resource';
  // In a TypeScript file where Vue.$http type needs augmentation
  declare module 'vue/types/vue' {
    interface Vue {
      $http: typeof VueResource.http;
    }
  }

  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.

Quickstart

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.

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

new Vue({
  el: '#app',
  data: {
    message: 'Loading data...',
    someData: null,
    error: null,
  },
  mounted() {
    // Example GET request
    this.$http.get('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => {
        // Handle success
        this.message = 'Data loaded!';
        this.someData = response.body; // response.body contains the parsed data
      }, response => {
        // Handle error
        this.message = 'Error loading data.';
        this.error = response.statusText;
        console.error('Request failed:', response);
      });

    // Example POST request
    this.$http.post('https://jsonplaceholder.typicode.com/posts', { title: 'foo', body: 'bar', userId: 1 })
      .then(response => {
        console.log('POST successful:', response.body);
      })
      .catch(error => {
        console.error('POST failed:', error);
      });
  },
  template: `
    <div id="app">
      <h1>Vue Resource Example</h1>
      <p>{{ message }}</p>
      <div v-if="someData">
        <h2>Fetched Data (GET)</h2>
        <pre>{{ JSON.stringify(someData, null, 2) }}</pre>
      </div>
      <div v-if="error">
        <p style="color: red;">Error: {{ error }}</p>
      </div>
    </div>
  `,
});