Vue nuxt.config.js file ignored - vue.js

Question

So i have the nuxt.config.js file in the project root directory with what follows:
{
modules: [
'#nuxtjs/axios',
'#nuxtjs/proxy'
],
axios: {
proxy: true,
},
proxy: {
'http://localhost:8080/api/v1': 'http://localhost:3000/api/v1'
}
}
I've been struggling to understand why my calls were not proxed (the endpoint remains the same) and then i noticed that even if i break the syntax (removing commas or parenthesys or whatever) and restart the server, my app does not even care.
Can anyone help me make things work?

Answer 1

#nuxtjs/proxy already included
#nuxtjs/axios already includes #nuxtjs/proxy, so you don't need to install it separately; and you don't need to add it to modules array:
{
modules: [
'#nuxtjs/axios',
//'#nuxtjs/proxy', // DON'T DO THIS
]
}
Proxy URL incorrect
Currently, you have it setup to append the original URL to the target, as shown in this example:
http://localhost:8080/api/v1/foo --> http://localhost:3000/api/v1/api/v1/foo
^^^^^^^^^^^ ^^^^^^^^^^^
The config should look like this:
{
proxy: {
'http://localhost:8080/api/v1': 'http://localhost:3030'
}
}
Be careful of duplicate axios configs
If you used create-nuxt-app, nuxt.config.js already includes an empty axios config, which could be easily missed. If you inserted your own config at the top of the config object, it would be overwritten by the empty axios config that had been automatically inserted at the bottom of the object (which effectively disables the proxy):
// nuxt.config.js
module.exports = {
// your config
axios: {
proxy: true
},
//...
// was automatically inserted; overwrites your config above
axios: {}
}