Vue 3 - global axios instance

Question

I want to make an axios instance available globally in my Vue 3 app.

Setup:

import { createApp } from 'vue'
import axios from 'axios'

const axiosInstance = axios.create({
  withCredentials: true,
})

const app = createApp()

app.config.globalProperties.$axios = axiosInstance

app.mount(el)

Usage:

let response = await this.$axios.get('/api/leads')

I get this error:

TypeError: this.$axios.get is not a function

Seems like this.$axios is undefined. I cannot figure out why.

Notes:

I'm using the @vue/compat build of Vue to migrate from Vue 2 to Vue 3. I'm following the official migration guide.
When inspecting this.$axios - I get ƒ wrap() ......

tony19 · Accepted Answer · 2022-03-07 23:33:35Z

8

The problem is caused by a known bug, where function properties (the result of axios.create() is actually a function) are bound to the component instance proxy, which inadvertently hides the function's own attached properties (i.e., $axios.get in this case). The PR that fixes the issue has not yet been merged.

A workaround is to convert the axiosInstance (a function) into an object with the spread operator:

const axiosInstance = axios.create({
  withCredentials: true,
})

const app = createApp()
                                        👇
app.config.globalProperties.$axios = { ...axiosInstance }

demo

answered Mar 7, 2022 at 23:33

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 3 - global axios instance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related