Registry / http-networking / vue-resource

vue-resource

library1.5.3jsnpmunverified

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.

http-networking web-framework

npm install vue-resource

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-RESOURCE

vue-resource

http-networkingjavascriptv1.5.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueResource

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

✗ const VueResource = require('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

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

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

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.

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> `, });

Debug

Known issues

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

affects: >=1.5.0

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

affects: >=1.4.0

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

affects: >=1.0.0

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

affects: >=1.0.0

Errors

Common errors & fixes

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

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

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

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.

Upgrade

Version history

1.5.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

24 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/pagekit/vue-resource ↗

packagehttps://www.npmjs.com/package/vue-resource ↗