Nuxt JS / Vercel deployment - Vercel replaces my absolute route domian with the deployment domain

Question

After deploying my nuxt project, vercel chagnes the image source from

https://farko.me/uploads/rahc-crsa/originals/f7f5b380-d81e-4ece-9931-05e84e5308ef.jpg

to

https://ecowas-rahc.vercel.app/uploads/rahc-crsa/originals/f7f5b380-d81e-4ece-9931-05e84e5308ef.jpg

Note that the domain changed.

I'm getting the URL from a nuxtServerInit API call

Do you have any idea what's going on?

export const actions = {
  async nuxtServerInit({ dispatch }, { $axios }) {
    // Website
    const website = await $axios.$get(
      `/items/website?single=1&fields=*.*,logo.data.*.*,translations.*`
    );
    dispatch("website/setting", website.data);

    // Alert
    const alert = await $axios.$get(`/items/notice?fields=*.*`);
    dispatch("alert/setting", alert.data);
  }
};

This is the code for the nuxtServerInit, I'm picking the url from the store.

Answer 1

I had the same problem and couldn't find out what's the problem literally for days. Finally, I came to the conclusion, that the @nuxtjs/axios package is making this error. This was a "legacy project", and it was using @nuxtjs/axios version 5.12.0.

Still not 100% sure what exactly in axios code was making this error, but when I updated to the latest (5.13.6), the issue disappeared.