A small wrapper for integrating axios to Vuejs
I created this library because, in the past, I needed a simple solution to migrate from vue-resource
to axios
.
It only binds axios to the vue
instance so you don't have to import everytime you use axios
.
npm install --save axios vue-axios
Import libraries in entry file:
// import Vue from 'vue' // in Vue 2
import * as Vue from 'vue' // in Vue 3
import axios from 'axios'
import VueAxios from 'vue-axios'
Usage in Vue 2:
Vue.use(VueAxios, axios)
Usage in Vue 3:
const app = Vue.createApp(...)
app.use(VueAxios, axios)
Just add 3 scripts in order: vue
, axios
and vue-axios
to your document
.
This wrapper bind axios
to Vue
or this
if you're using single file component.
You can use axios
like this:
Vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log(response.data)
})
this.$http.get(api).then((response) => {
console.log(response.data)
})
This wrapper bind axios
to app
instance or this
if you're using single file component.
in option API, you can use axios
like this:
// App.vue
export default {
name: 'App',
methods: {
getList() {
this.axios.get(api).then((response) => {
console.log(response.data)
})
// or
this.$http.get(api).then((response) => {
console.log(response.data)
})
}
}
}
however, in composition API setup
we can't use this
, you should use provide
API to share the globally instance properties first, then use inject
API to inject axios
to setup
:
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App).use(store)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios) // provide 'axios'
app.mount('#app')
// App.vue
import { inject } from 'vue'
export default {
name: 'Comp',
setup() {
const axios: any = inject('axios') // inject axios
const getList = (): void => {
axios
.get(api)
.then((response: { data: any }) => {
console.log(response.data)
});
};
return { getList }
}
}
Please kindly check full documentation of axios too
The library allows to have different version of axios at the same time as well as change the default registration names (e.g. axios
and $http
). To use this feature you need to provide options like an object where:
-
<key>
is registration name -
<value>
is instance of axios
For Vue it looks like this:
// Vue 2 / Vue 3 + Composition API
import App from './App.vue'
import VueAxios from 'vue-axios'
import axios from 'axios'
import axios2 from 'axios'
Vue.use(VueAxios, { $myHttp: axios, axios2: axios2 }) // or app.use() for Vue 3 Optiona API
// usage
export default {
methods: {
getList(){
this.$myHttp.get(api).then((response) => {
console.log(response.data)
})
this.axios2.get(api).then((response) => {
console.log(response.data)
})
}
}
}
It works similarly in Options API of Vue 3 but if you want to use Composition API you should adjust your code a bit to extract proper keys, e.g.:
// Vue 2 + Setup function
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App).use(store)
app.use(VueAxios, { $myHttp: axios, axios2: axios2 })
app.provide('$myHttp', app.config.globalProperties.$myHttp) // provide '$myHttp'
app.provide('axios2', app.config.globalProperties.axios2) // provide 'axios2'
app.mount('#app')
// App.vue
import { inject } from 'vue'
export default {
name: 'Comp',
setup() {
const $myHttp: any = inject('$myHttp') // inject $myHttp
const getListWithMyHttp = (): void => {
$myHttp
.get(api)
.then((response: { data: any }) => {
console.log(response.data)
});
};
const axios2: any = inject('axios2') // inject axios2
const getListWithAxios2 = (): void => {
axios2
.get(api)
.then((response: { data: any }) => {
console.log(response.data)
});
};
return { getListWithMyHttp, getListWithAxios2 }
}
}