Registry / devops / vue-plugin-axios

vue-plugin-axios

library1.0.14jsnpmunverified

Integrates Axios as a Vue.js plugin, providing convenient `$get`, `$post`, etc., methods on Vue instances, along with an `$axios`/`$http` instance. Current stable version is 1.0.14 (released 2019). Allows custom Axios config, request/response interceptors, and header/token management. Designed for Vue 2.x (requires Vue >= 1.0.0). Differentiates from `vue-axios` by including built-in shorthand methods and Nuxt.js support. Release cadence is low (last update 2019). Not actively maintained.

devops

npm install vue-plugin-axios

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-PLUGIN-AXIOS

vue-plugin-axios

devopsjavascriptv1.0.14

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.

VueAxios

✓ import VueAxios from 'vue-plugin-axios'

✗ const VueAxios = require('vue-plugin-axios')

Default export; import then use with Vue.use(). CommonJS require also works.

Vue.use

✓ Vue.use(VueAxios, { axios })

✗ Vue.use(VueAxios)

Must pass axios instance in options object.

$get

✓ this.$get('/api/users')

✗ this.$vueAxios.$get('/api/users')

Shortcut methods are attached directly to Vue prototype. No need to prefix with $axios.

Installs the plugin with Axios config and interceptors, then uses $get shortcut in a Vue component.

import Vue from 'vue'; import VueAxios from 'vue-plugin-axios'; import axios from 'axios'; Vue.use(VueAxios, { axios, config: { baseURL: 'https://api.example.com/', timeout: 5000 }, interceptors: { beforeRequest(config, axiosInstance) { config.headers['X-Requested-With'] = 'XMLHttpRequest'; return config; }, beforeResponseError(error) { console.error('API Error:', error.message); return Promise.reject(error); } } }); new Vue({ el: '#app', async mounted() { try { const users = await this.$get('/users'); console.log(users); } catch (err) { console.error(err); } } });

Debug

Known issues

gotchaDo not forget to pass axios instance in options when calling Vue.use(VueAxios, { axios }). Missing axios will cause runtime error.

fix

Always include axios: require('axios') or import axios from 'axios' in the options object.

affects: >=1.0.0

gotchaReturn value from $get/$post/etc. is automatically unwrapped to response.data, not the full response object. To get full response, use this.$axios.get() instead.

fix

Use this.$axios.get() if you need status, headers, etc.

affects: >=1.0.0

deprecatedPlugin is no longer actively maintained (last update 2019). May have compatibility issues with newer versions of Vue or Axios.

fix

Consider migrating to vue-axios or @nuxtjs/axios for Nuxt projects.

affects: >=1.0.0

gotchaNuxt.js usage requires calling VueAxios.install(Vue, { axios, nuxtInject: inject }) instead of Vue.use().

fix

In Nuxt plugin, use VueAxios.install(Vue, { axios, nuxtInject: inject }) and export default.

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read property 'get' of undefined

Vue.use() called without passing axios instance, so $http/$axios are undefined.

fix

Ensure options object includes axios: import axios from 'axios' and pass { axios }.

TypeError: VueAxios is not a constructor

Using import { VueAxios } instead of default import (or CommonJS require).

fix

Use default import: import VueAxios from 'vue-plugin-axios'

TypeError: $get is not a function

Plugin not installed before creating the Vue instance, or Vue.use() missing.

fix

Call Vue.use(VueAxios, { axios }) before new Vue().

Upgrade

Version history

1.0.14latest on npm

Audit

Dependencies

vuerequiredPeer dependency; plugin registers methods on Vue prototype

axiosrequiredRequired at runtime; passed via options

Agent activity

6 hits · last 30 days

node

Resources

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

packagevue-plugin-axios ↗

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