Setup

Install

Add @nuxtjs/axios dependency to your project:

yarn add @nuxtjs/axios
npm install @nuxtjs/axios

Then add it to the modules section in your nuxt.config.js:

nuxt.config.js
export default {
  modules: ['@nuxtjs/axios']
}

That's it! You can now use $axios in your Nuxt app ✨

Configure

Add an axios object to your nuxt.config.js to configure global options which will be applied to all requests:

nuxt.config.js
export default {
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    // proxy: true
  }
}

Learn more about axios's options.

TypeScript

Add the types to your "types" array in tsconfig.json after the @nuxt/types (Nuxt 2.9.0+) or @nuxt/vue-app entry

tsconfig.json
{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  }
}

Why?

Because of the way Nuxt works the $axios property on the context has to be merged into the Nuxt Context interface via declaration merging. Adding @nuxtjs/axios to your types will import the types from the package and make typescript aware of the additions to the Context interface.

Edit this page on GitHub Updated at Mon, Apr 4, 2022