Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 206 Commits
.github/workflows		.github/workflows
examples		examples
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
.npmignore		.npmignore
Gulpfile.js		Gulpfile.js
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
index.d.ts		index.d.ts
package-lock.json		package-lock.json
package.json		package.json

Repository files navigation

vue-axios

A small wrapper for integrating axios to Vuejs

Why

I created this library because, in the past, I needed a simple solution to migrate fromvue-resource toaxios.

It only binds axios to thevue instance so you don't have to import everytime you useaxios.

How to install:

ES6 Module:

npm install --save axios vue-axios

Import libraries in entry file:

// import Vue from 'vue'   // in Vue 2import*asVuefrom'vue'// in Vue 3importaxiosfrom'axios'importVueAxiosfrom'vue-axios'

Usage in Vue 2:

Vue.use(VueAxios,axios)

Usage in Vue 3:

constapp=Vue.createApp(...)app.use(VueAxios,axios)

Script:

Just add 3 scripts in order:vue,axios andvue-axios to yourdocument.

Usage:

in Vue 2

This wrapper bindaxios toVue orthis if you're using single file component.

You can useaxios 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)})

in Vue 3

This wrapper bindaxios toapp instance orthis if you're using single file component.

in option API, you can useaxios like this:

// App.vueexportdefault{name:'App',methods:{getList(){this.axios.get(api).then((response)=>{console.log(response.data)})// orthis.$http.get(api).then((response)=>{console.log(response.data)})}}}

however, in composition APIsetup we can't usethis, you should useprovide API to share the globally instance properties first, then useinject API to injectaxios tosetup:

// main.tsimport{createApp}from'vue'importAppfrom'./App.vue'importstorefrom'./store'importaxiosfrom'axios'importVueAxiosfrom'vue-axios'constapp=createApp(App).use(store)app.use(VueAxios,axios)app.provide('axios',app.config.globalProperties.axios)// provide 'axios'app.mount('#app')// App.vueimport{inject}from'vue'exportdefault{name:'Comp',setup(){constaxios:any=inject('axios')// inject axiosconstgetList=():void=>{axios.get(api).then((response:{data:any})=>{console.log(response.data)});};return{ getList}}}

Please kindly check full documentation ofaxios too

Multiple axios instances support

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 APIimportAppfrom'./App.vue'importVueAxiosfrom'vue-axios'importaxiosfrom'axios'importaxios2from'axios'Vue.use(VueAxios,{$myHttp:axios,axios2:axios2})// or app.use() for Vue 3 Optiona API// usageexportdefault{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 functionimport{createApp}from'vue'importAppfrom'./App.vue'importstorefrom'./store'importaxiosfrom'axios'importVueAxiosfrom'vue-axios'constapp=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.vueimport{inject}from'vue'exportdefault{name:'Comp',setup(){const$myHttp:any=inject('$myHttp')// inject $myHttpconstgetListWithMyHttp=():void=>{$myHttp.get(api).then((response:{data:any})=>{console.log(response.data)});};constaxios2:any=inject('axios2')// inject axios2constgetListWithAxios2=():void=>{axios2.get(api).then((response:{data:any})=>{console.log(response.data)});};return{ getListWithMyHttp, getListWithAxios2}}}