Registry / communication / vue-axios-plugin

vue-axios-plugin

library1.3.0jsnpmunverified

A Vue.js plugin that binds axios to the Vue instance, providing $http and $axios methods for making HTTP requests. Version 1.3.0 is the current stable release. It offers request/response interceptors configuration via Vue.use options. Compared to similar libraries like vue-resource, it leverages the popular axios library with its extensive features. Note: Since v1.3.0, the default content-type is no longer forced to application/x-www-form-urlencoded; users must configure it manually.

communication

npm install vue-axios-plugin

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-AXIOS-PLUGIN

vue-axios-plugin

communicationjavascriptv1.3.0

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.

VueAxiosPlugin

✓ import VueAxiosPlugin from 'vue-axios-plugin'

✗ const VueAxiosPlugin = require('vue-axios-plugin');

Default import works with both ESM and CJS. The package has no named exports.

$http

✓ this.$http.get(url, data, options).then(...)

✗ Vue.http.get(url, data, options)

$http is the default method wrapper available on Vue instances after Vue.use(VueAxiosPlugin). Only supports get and post.

$axios

✓ this.$axios.get(url, config).then(...)

✗ this.$http.get(url, config) // $http.get expects (url, data, options) not (url, config)

$axios provides all axios methods (get, post, put, delete, etc.) with axios signature (url, config).

Sets up vue-axios-plugin with interceptors and demonstrates basic GET and POST requests using $http and $axios.

import Vue from 'vue'; import VueAxiosPlugin from 'vue-axios-plugin'; import axios from 'axios'; Vue.use(VueAxiosPlugin, { reqHandleFunc: config => config, reqErrorFunc: error => Promise.reject(error), resHandleFunc: response => response, resErrorFunc: error => Promise.reject(error) }); new Vue({ el: '#app', mounted() { this.$http.get('https://api.example.com/data') .then(response => console.log(response.data)) .catch(error => console.error(error)); this.$axios.post('https://api.example.com/submit', { key: 'value' }) .then(response => console.log(response.data)) .catch(error => console.error(error)); } });

Debug

Known issues

breakingIn v1.3.0, the default transformRequest for application/x-www-form-urlencoded was removed. Previously, POST requests were automatically encoded; now you must manually configure headers and transformRequest if needed.

fix

Manually set 'Content-Type': 'application/x-www-form-urlencoded' and use qs.stringify for data when needed.

affects: >=1.3.0

gotchaThe $http method only supports get and post; for other HTTP methods (put, delete, etc.) you must use $axios.

fix

Use this.$axios.put(...) or this.$axios.delete(...) instead.

affects: >=1.0.0

deprecatedThe plugin is no longer actively maintained. Last release was over 3 years ago. Consider using axios directly or vue-axios.

fix

Migrate to vue-axios (https://github.com/imcvampire/vue-axios) or directly use axios with Vue.prototype.$http = axios.

affects: *

Errors

Common errors & fixes

Cannot read property 'get' of undefined

Attempting to use this.$http or this.$axios before the plugin is installed with Vue.use().

fix

Ensure Vue.use(VueAxiosPlugin) is called in your entry file before creating any Vue instances.

Expected the 'Content-Type' request header to be 'application/x-www-form-urlencoded' but was 'application/json'

Since v1.3.0, the plugin does not set Content-Type automatically; your backend expects form-encoded data.

fix

Manually set headers: { 'Content-Type': 'application/x-www-form-urlencoded' } and use qs.stringify(data) for POST data.

Upgrade

Version history

1.3.0latest on npm

Audit

Dependencies

vuerequiredpeer dependency — the plugin is designed for Vue.js projects

axiosrequiredruntime dependency — the plugin wraps axios for HTTP requests

Agent activity

39 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/yugasun/vue-axios-plugin ↗

packagevue-axios-plugin ↗

homepagehttps://github.com/yugasun/vue-axios-plugin#readme ↗