I’m trying to get my feet wet with Nuxt.
I understand that there are different scenarios for data-fetching:
– First call: Server fetches data from api, prerenders html/app, sends whole page
– After that: App on client makes requests to api directly, only fetches json
This is handeld by nuxt automatically.
So I guess I have to expose my API to the client as well, correct?
Would I set the base-path of Axios in Nuxt to something like “http://www.myproj.com/api” ?
If yes, is there any way that nuxt can access the api locally when providing server-rendered content (for example “http://localhost:3333” instead?
Yes there is. When configuring axios in your nuxt.config.js you can set a baseURL and a browserBaseURL. Nuxt will use the baseURL when pre-rendering and the browserBaseURL from the client.
You can see this in the docs here.
If you are deploying to a vps you can have your api running on something like http://localhost:3333 and set that as your baseURL. For the browserBaseURL, if you are using https, you would want so set up an upstream for your api in nginx so that your browserBaseURL would be something like ‘/api’.