Registry / communication / vue-fetch-plugin

vue-fetch-plugin

library2.0.9jsnpmunverified

A fetch plugin for Vue.js projects providing convenient methods ($get, $post, $fetch) via Vue.prototype or direct import. Version 2.0.9 is the latest stable release. It wraps the native fetch API with request/response interceptors, configurable default options, and async/await support. Compared to axios, it leverages the browser's built-in fetch rather than adding a separate HTTP client. Release cadence is irregular; last update was 2019. No TypeScript typings included.

communication

npm install vue-fetch-plugin

package ↗

INSTALL

IMPORT

SIG · VUE-FETCH-PLUGIN

vue-fetch-plugin

communicationjavascriptv2.0.9

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

default

✓ import VueFetchPlugin from 'vue-fetch-plugin'

✗ const VueFetchPlugin = require('vue-fetch-plugin')

Package exports a default export; CJS require works but ESM import is recommended.

myFetch (direct import)

✓ import myFetch from 'vue-fetch-plugin'

✗ import { myFetch } from 'vue-fetch-plugin'

The default export can also be used directly without Vue.use() for non-Vue contexts.

Vue.use() pattern

✓ Vue.use(VueFetchPlugin, { ... })

✗ Vue.use(vueFetchPlugin) or Vue.use('vue-fetch-plugin')

Must pass the imported default export, not a string or lowercase variable.

Demonstrates installing the plugin with Vue.use(), configuring options, and using the $get instance method.

import Vue from 'vue'; import VueFetchPlugin from 'vue-fetch-plugin'; Vue.use(VueFetchPlugin, { credentials: 'include', headers: { 'Content-Type': 'application/json; charset=utf-8' }, reqInterceptor: request => request, resFilter: response => response, resError: error => error }); new Vue({ el: '#app', methods: { async getTest() { const result = await this.$get('https://api.example.com/data'); console.log(result); } }, template: '<button @click="getTest">Fetch</button>' });

Debug

Known issues

gotchaPlugin pollutes Vue.prototype with $fetch, $get, $post methods. This may conflict with other plugins or future Vue versions.

fix

Use direct import instead: import myFetch from 'vue-fetch-plugin'; myFetch.get(url)

affects: >=1.0.0

deprecatedPackage is no longer actively maintained; last publish 2019. No Vue 3 or TypeScript support.

fix

Consider migrating to a modern alternative like axios or vue-axios with Vue 3.

affects: >=2.0.0

breakingBreaking change: In version 2.0.0, the plugin changed from providing $http to $fetch/$get/$post. Old code using $http will break.

fix

Replace $http calls with $fetch, $get, or $post; or pin version to 1.x.

affects: <2.0.0

gotchaWhen using $post, the second argument (body) is automatically stringified to JSON only if it is an object; non-objects may cause unexpected behavior.

fix

Explicitly JSON.stringify body for non-object payloads or set 'Content-Type' manually.

affects: >=2.0.0

gotchaInterceptor functions must return the argument (request/response/error) or a Promise; forgetting to return will break the chain.

fix

Ensure reqInterceptor, resFilter, resError always return their input or a new value.

affects: >=2.0.0

Errors

Common errors & fixes

Cannot read property '$get' of undefined

Plugin not installed or installed after creating Vue instance.

fix

Call Vue.use(VueFetchPlugin) before new Vue().

Unknown custom element: <vue-fetch-plugin>

Mistakenly trying to use the plugin as a component.

fix

Use Vue.use() and call instance methods like this.$get().

TypeError: Failed to fetch

Network error, CORS, or invalid URL.

fix

Check the URL, ensure CORS headers on server, and verify credentials option.

Upgrade

Version history

2.0.9latest on npm

Audit

Dependencies

vuerequiredpeer dependency; plugin is designed for Vue 2.x

Agent activity

27 hits · last 30 days

node

OpenAI (training)

Resources

packagevue-fetch-plugin ↗