Registry / devops / vue-axios-interceptors

vue-axios-interceptors

library0.3.2jsnpmunverified

A lightweight Vue.js plugin that registers global Axios response interceptors and exposes a global event bus (window.intercepted) to catch and handle AJAX errors uniformly across the application. Version 0.3.2 (no recent releases) is designed for Vue 2 and requires Axios and Vue to be available on the window object. It emits events by status code category (e.g., 'response:4xx', 'response:500') and specific codes (e.g., 'response:404'), with special parsing for Laravel 5.5+ 422 validation errors (body becomes a key-value object). Differentiates from manual interceptors by providing a ready-made event system; minimal setup but limited to Vue 2 and global window dependencies.

devops

npm install vue-axios-interceptors

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-AXIOS-INTERCEP

vue-axios-interceptors

devopsjavascriptv0.3.2

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.

Vue

✓ window.Vue = require('vue'); require('vue-axios-interceptors');

✗ import Vue from 'vue'; import VueAxiosInterceptors from 'vue-axios-interceptors'; Vue.use(VueAxiosInterceptors);

Package is not installable via ESM import; it must be required after setting window.Vue. Does not export a Vue plugin.

window.intercepted

✓ window.intercepted.$on('response', callback)

✗ import { intercepted } from 'vue-axios-interceptors'

The event bus is attached to window; do not try to import it. Use window.intercepted directly.

event names

✓ window.intercepted.$on('response:422', callback)

✗ window.intercepted.$on('status:422', callback)

Event names follow the pattern 'response:' followed by code, category, or HTTP code name. See docs for full list.

Shows setup with global Vue and Axios, then attaching listeners for all responses and specific error codes.

// Ensure Vue and Axios are globally available window.Vue = require('vue'); window.axios = require('axios'); // Load the package (must be after setting window.Vue) require('vue-axios-interceptors'); // Now listen for errors anywhere in your app window.intercepted.$on('response', function(data) { console.log('Global AJAX error:', data.status, data.code); }); // Example: handle 404 specifically window.intercepted.$on('response:404', function(data) { console.log('Not found:', data.body); }); // Example: handle all 5xx server errors window.intercepted.$on('response:5xx', function(data) { console.log('Server error:', data.status); });

Debug

Known issues

breakingPackage does not export a Vue plugin; attempting Vue.use() will not work and may throw an error.

fix

Use require('vue-axios-interceptors') after setting window.Vue. Do not use import or Vue.use().

affects: >=0.1.0

gotchaVue and Axios must be available on the window object before requiring this package. Failing to set window.Vue will cause an error.

fix

Ensure window.Vue = require('vue'); and window.axios = require('axios'); are executed before the require statement.

affects: >=0.1.0

deprecatedThe package relies on Vue 2's event system (window.intercepted is a Vue instance). Vue 3 does not have a global event bus by default, making this package incompatible with Vue 3 without adaptation.

fix

Use a different error handling solution or manually adapt using a third-party event emitter for Vue 3.

affects: >=0.1.0

gotchaThe package adds interceptors to window.axios. If window.axios is reassigned after requiring the package, interceptors will be lost.

fix

Set window.axios before requiring the package and do not reassign it afterward.

affects: >=0.1.0

gotchaThe event name for 422 Unprocessable Entity is 'response:unprocessable-entity' (lowercase, hyphens). The special Laravel parsing only triggers on 422.

fix

Use exact event name as documented: 'response:unprocessable-entity' and expect data.body to be a key-value object for Laravel 422 errors.

affects: >=0.1.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot set property '$on' of undefined

window.intercepted is undefined because the package was required before window.Vue was set.

fix

Set window.Vue = require('vue'); before require('vue-axios-interceptors');

Uncaught TypeError: window.axios.interceptors.request.use is not a function

The package tries to add interceptors to window.axios, but window.axios is not yet defined or is not an Axios instance.

fix

Set window.axios = require('axios'); before require('vue-axios-interceptors');

Error: Cannot find module 'vue-axios-interceptors'

The package is not installed or the import path is incorrect when using ES modules.

fix

Install via npm: npm install vue-axios-interceptors --save. Then use require('vue-axios-interceptors') (not import). Ensure the module is in node_modules.

Upgrade

Version history

0.3.2latest on npm

Audit

Dependencies

vuerequiredRequires Vue instance globally on window.Vue

axiosrequiredRequires Axios globally on window.axios

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/mattias-persson/vue-axios-interceptors ↗

packagevue-axios-interceptors ↗

homepagehttps://github.com/mattias-persson/vue-axios-interceptors#readme ↗