How to set up Axios and Nuxt runtime config for multiple APIs?

Question

I've read through all the docs for Nuxt.js environment variables and the Axios module but I'm still quite confused on how to properly set them up for my use case.

I want to query 2 separate APIs:

1. my own backend with user authentication (e.g. JWT) built with Nuxt serverMiddleware
2. a public API that requires an account and provides an API key (e.g. TMDB)

My own backend serves as an "extension" of the public API so that I can store additional data for my users.

Now my question is how do I set up my environment variables so that I can safely send dynamic requests to the public API without exposing its private API key? Do I need to use my own backend as a "proxy" and forward client side requests to the public API from there? Or can I directly send requests inside asyncData and fetch when running in SSR mode?

I think I need a general explanation on how Nuxt publicRuntimeConfig and privateRuntimeConfig, and Axios baseURL and browserBaseURL all work together. The docs didn't explain them clearly enough for me.

Answer 1

This question is mixing a lot of stuff at the same time but in no specific order:

• you need to run your private call on the server and use privateRuntimeConfig which is available only on the server
• fetch() and asyncData() will run both on server and client side (can be forced to be run only on client side with fetchOnServer: false), and it's not a good idea to have those on client since everything there can be publicly seen
• if you want to have several instances of axios, a quick search can be helpful to setup this
• if you want to use axios in serverMiddleware you'll need to install and import a regular axios since it will be out of the scope of Nuxt
• for the most part, if an API is supposed to be used from a front-end you can sometimes use the public API key provided (can be stored in publicRuntimeConfig), if it should remain secret, you'll need a backend to hide it in-between
• baseURL is pretty much the default value, browserBaseURL as explained in the docs is mainly an override specific to client-side requests, use it if you need to have something different and that overrides the baseURL one
• there are several questions that can be found about how to hide some calls when using an SPA (common question), the incoming edge-side rendering of Nuxt3 may maybe help on this one
• one thing to bear in mind is that only the first initial reach to the server will run a server query, everything else will be a hydrated-SPA app meaning that you will not reach back the server after the hydration step (like a MPA Wordpress server would do)