Axios Plugin in Nuxt 3

Question

I try to configure Axios in nuxt 3 using a plugin. As I studied the documentation, plugin require in nuxt.config is no longer needed to I created the file right away in my plugins folder:

export default defineNuxtPlugin(nuxtApp => {
  const domain = 'http://localhost:3000/v1/'
  const username = "abcdef"
  const password = "123456"
  const token = `${username}:${password}`
  const encodedToken = Buffer.from(token).toString('base64')

  let publicApi = nuxtApp.$axios.create({
    baseUrl: domain,
    headers: {
      common: {
        Authorization: `Basic ${encodedToken}`
      }
    }
  })

  return {
    provide: {
      publicApi: publicApi
    }
  }
})

I then try to call the newly injected variable in my components:

this.$publicApi.$get('some_endpoint')

which fires a request via axios successfully but the previously configured baseUrl and headers are empty so it seems that my axios instance was not created somehow.

What am I doing wwrong?

Answer 1

wrong syntax used this is correct:

baseURL: domain

now it works