How to add global interceptor with axios in NuxtJS?

Question

I am working with NuxtJS. So i want to read some response headers and save them in VueJS store. I saw the following documentation : https://axios.nuxtjs.org/extend.html. It is said, i could add some a axios plugin to handle request, response ... Here is the configuration suggested on the nuxt site : nuxt.config.js

{
  modules: [
    '@nuxtjs/axios',
  ],

  plugins: [
    '~/plugins/axios'
  ]
}

Question 1 : Why plugins is not declared as ~/plugins/axios.js ? Is there a difference with ~/plugins/axios ? To avoid error the following error :

 ERROR  Failed to compile with 1 errors                                        friendly-errors 13:12:58

This dependency was not found:                                                 friendly-errors 13:12:58
                                                                               friendly-errors 13:12:58
* eventsource-polyfill in multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                               friendly-errors 13:12:58
To install it, you can run: npm install --save eventsource-polyfill  

I write :

plugins: [
        '~/plugins/axios.js'
      ]

To write the following code interceptor in plugins/axios.js :

export default function ({ $axios, redirect }) {
   $axios.onRequest(config => {
        console.log('Making request to ' + config.url)
    }),


    $axios.onResponse(response => {
        console.log(" RESPONSE  ####################### ")
    })
}

When i run my application and perform some request. I don't see log in console. Question 2 : What's missing ?

Then i check my package json :

 {
  "name": "wp-nuxt",
  "version": "1.0.0",
  "description": "Headless WordPress with Nuxt",
  "author": "Me",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.10.2",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0"
  }
}

Question 3 : Why i don't have axios module inside nuxt module ?

Question 4 : How to do to have axios under nuxt node module ?

Thank you for your help.

Answer 1

nuxt.config.js:

module.exports = {
  modules: [
   '@nuxtjs/axios',
  ],

  axios: {
    // proxyHeaders: false
  }
}

Update: Axios Module is integration with Nuxt.js. If you want to use Axios with Nuxt.js project, it will be good integration. You can see further information -> https://axios.nuxtjs.org/setup.html#install