0
# Vue Axios
1

2
Vue Axios is a lightweight wrapper library that seamlessly integrates the Axios HTTP client with Vue.js applications. It provides convenient access to Axios through component properties, eliminating the need for repetitive imports while supporting both Vue 2 and Vue 3.
3

4
## Package Information
5

6
- **Package Name**: vue-axios
7
- **Package Type**: npm
8
- **Language**: JavaScript with TypeScript definitions
9
- **Installation**: `npm install --save axios vue-axios`
10

11
## Core Imports
12

13
```javascript
14
import VueAxios from 'vue-axios';
15
import axios from 'axios';
16
```
17

18
For CommonJS:
19

20
```javascript
21
const VueAxios = require('vue-axios');
22
const axios = require('axios');
23
```
24

25
## Basic Usage
26

27
### Vue 2
28

29
```javascript
30
import Vue from 'vue';
31
import axios from 'axios';
32
import VueAxios from 'vue-axios';
33

34
Vue.use(VueAxios, axios);
35

36
// In components
37
export default {
38
  methods: {
39
    fetchData() {
40
      // Using this.axios
41
      this.axios.get('/api/data').then(response => {
42
        console.log(response.data);
43
      });
44
      
45
      // Using this.$http
46
      this.$http.get('/api/data').then(response => {
47
        console.log(response.data);
48
      });
49
    }
50
  }
51
}
52

53
// Global access via Vue.axios
54
Vue.axios.get('/api/data').then(response => {
55
  console.log(response.data);
56
});
57
```
58

59
### Vue 3 Options API
60

61
```javascript
62
import { createApp } from 'vue';
63
import axios from 'axios';
64
import VueAxios from 'vue-axios';
65

66
const app = createApp({});
67
app.use(VueAxios, axios);
68

69
// In components
70
export default {
71
  methods: {
72
    fetchData() {
73
      // Using this.axios
74
      this.axios.get('/api/data').then(response => {
75
        console.log(response.data);
76
      });
77
      
78
      // Using this.$http
79
      this.$http.get('/api/data').then(response => {
80
        console.log(response.data);
81
      });
82
    }
83
  }
84
}
85
```
86

87
### Vue 3 Composition API
88

89
```typescript
90
// main.ts
91
import { createApp } from 'vue';
92
import axios from 'axios';
93
import VueAxios from 'vue-axios';
94

95
const app = createApp({});
96
app.use(VueAxios, axios);
97
app.provide('axios', app.config.globalProperties.axios);
98

99
// Component
100
import { inject } from 'vue';
101

102
export default {
103
  setup() {
104
    const axios = inject('axios');
105
    
106
    const fetchData = () => {
107
      axios.get('/api/data').then(response => {
108
        console.log(response.data);
109
      });
110
    };
111
    
112
    return { fetchData };
113
  }
114
}
115
```
116

117
## Capabilities
118

119
### Plugin Installation
120

121
Installs the Vue Axios plugin, registering axios instances with the Vue application.
122

123
```javascript { .api }
124
/**
125
 * Vue Axios plugin installer function
126
 * @param app - Vue application instance (Vue 2 or Vue 3)
127
 * @param options - Axios instance or object with multiple axios instances
128
 * @returns void
129
 */
130
function VueAxios(app: App, options: AxiosStatic | Record<string, AxiosStatic>): void;
131
```
132

133
**Single Instance Installation:**
134

135
```javascript
136
// Registers axios and $http on components and app
137
app.use(VueAxios, axios);
138
```
139

140
**Multiple Instance Installation:**
141

142
```javascript
143
// Custom registration keys with different axios instances
144
app.use(VueAxios, {
145
  api: axios.create({ baseURL: '/api' }),
146
  cdn: axios.create({ baseURL: 'https://cdn.example.com' }),
147
  $http: axios  // Backward compatibility
148
});
149

150
// Usage in components
151
this.api.get('/users');
152
this.cdn.get('/assets/image.jpg');
153
this.$http.get('/legacy-endpoint');
154
```
155

156
### Component Integration
157

158
The plugin automatically adds axios instances to component contexts based on Vue version.
159

160
#### Vue 2 Component Properties
161

162
```typescript { .api }
163
interface Vue {
164
  /** Axios instance for HTTP requests */
165
  axios: AxiosStatic;
166
  /** Alias for axios instance (backward compatibility) */
167
  $http: AxiosStatic;
168
}
169

170
interface VueConstructor {
171
  /** Global axios instance on Vue constructor */
172
  axios: AxiosStatic;
173
}
174
```
175

176
#### Vue 3 Component Properties
177

178
```typescript { .api }
179
interface ComponentCustomProperties {
180
  /** Axios instance for HTTP requests */
181
  axios: AxiosStatic;
182
  /** Alias for axios instance (backward compatibility) */
183
  $http: AxiosStatic;
184
}
185

186
interface App {
187
  /** Global axios instance on app */
188
  axios: AxiosStatic;
189
}
190
```
191

192
### Configuration Options
193

194
The plugin accepts flexible configuration options for different use cases.
195

196
#### Single Axios Instance
197

198
```javascript { .api }
199
// Accepts a single axios instance
200
VueAxios(app, axios);
201
```
202

203
This automatically creates the following registrations:
204
- `axios`: The provided axios instance
205
- `$http`: The same axios instance (for backward compatibility)
206

207
#### Multiple Axios Instances
208

209
```javascript { .api }
210
// Accepts an object mapping registration keys to axios instances
211
VueAxios(app, {
212
  [key: string]: AxiosStatic
213
});
214
```
215

216
Custom registration example:
217

218
```javascript
219
app.use(VueAxios, {
220
  'api': axios.create({ baseURL: '/api' }),
221
  'external': axios.create({ baseURL: 'https://api.external.com' }),
222
  'auth': axios.create({ 
223
    baseURL: '/auth',
224
    withCredentials: true 
225
  })
226
});
227

228
// Component usage
229
this.api.get('/users');
230
this.external.get('/weather');
231
this.auth.post('/login', credentials);
232
```
233

234
### Automatic Installation Support
235

236
The plugin supports multiple module formats and automatic installation.
237

238
#### Module Format Support
239

240
```javascript { .api }
241
// CommonJS export
242
module.exports = VueAxios;
243

244
// AMD support
245
define([], function () { return VueAxios; });
246

247
// Global/UMD automatic installation
248
// Auto-installs if window.Vue, window.axios, and Vue.use exist
249
```
250

251
#### Automatic Global Installation
252

253
When loaded via script tags, the plugin automatically installs itself if the following global variables exist:
254
- `window.Vue` (Vue 2 only)
255
- `window.axios`
256
- `Vue.use` function
257

258
```html
259
<!-- Automatic installation via script tags -->
260
<script src="vue.js"></script>
261
<script src="axios.js"></script>
262
<script src="vue-axios.js"></script>
263
<!-- vue-axios automatically calls Vue.use(VueAxios, axios) -->
264
```
265

266
### Version Compatibility
267

268
The plugin automatically detects Vue version and applies appropriate registration strategies:
269

270
- **Vue 2**: Registers axios instances on the Vue prototype (`Vue.prototype`)
271
- **Vue 3**: Registers axios instances on global properties (`app.config.globalProperties`)
272

273
Version detection is handled internally by parsing the major version number from the `app.version` property (e.g., "3.2.1" → 3). If version detection fails, the plugin logs an error and exits gracefully without registration.
274

275
## Types
276

277
```typescript { .api }
278
import { AxiosStatic } from 'axios';
279
import { App } from 'vue';
280

281
/**
282
 * Vue Axios plugin function type
283
 * Note: The official index.d.ts in the package only declares support for single
284
 * AxiosStatic instances, but the implementation supports both single instances
285
 * and multiple instance objects as shown here.
286
 */
287
declare function VueAxios(
288
  app: App, 
289
  options: AxiosStatic | Record<string, AxiosStatic>
290
): void;
291

292
/**
293
 * Vue 2 constructor interface
294
 */
295
interface VueConstructor {
296
  use(plugin: any, ...options: any[]): VueConstructor;
297
  axios: AxiosStatic;
298
  prototype: any;
299
  version: string;
300
}
301

302
/**
303
 * Vue 3 app interface extensions
304
 */
305
interface App {
306
  use(plugin: any, ...options: any[]): App;
307
  config: {
308
    globalProperties: Record<string, any>;
309
  };
310
  axios: AxiosStatic;
311
  version: string;
312
  vueAxiosInstalled?: boolean;
313
}
314
```
315

316
## Error Handling
317

318
The plugin includes built-in validation and error reporting for common configuration issues:
319

320
- **Invalid Configuration**: Logs error if options are not axios-like objects
321
- **Unknown Vue Version**: Logs error if Vue version cannot be detected
322
- **Duplicate Installation**: Prevents multiple installations on the same app instance via `app.vueAxiosInstalled` flag
323

324
```javascript
325
// Invalid configuration example
326
app.use(VueAxios, "not-an-axios-instance");
327
// Console: "[vue-axios] configuration is invalid, expected options are either <axios_instance> or { <registration_key>: <axios_instance> }"
328

329
// Unknown Vue version
330
app.use(VueAxios, axios); // on non-Vue app
331
// Console: "[vue-axios] unknown Vue version"
332

333
// Duplicate installation
334
app.use(VueAxios, axios);
335
app.use(VueAxios, axios); // Second call is silently ignored
336
```