feat: allow to edit image config at runtime

[oemer-aran]

Unfortunately Nuxt 3 doesn't allow to change env variables used in the nuxt.config.ts at runtime. They are build-time only.
In our pipeline we first build nuxt and then add the environment variables. However, the nuxt.config.ts will still have the undefined values. That's why we need to be able to edit the config at runtime.

The following nuxt config works fine in development but BACKEND_IMAGES_ENDPOINT is undefined in production deployment:

export default defineNuxtConfig({
    // also doesn't work with NUXT_ or NUXT_PUBLIC_ prefix
    domains: [process.env.BACKEND_IMAGES_ENDPOINT],
    alias: {
      "/images": `${process.env.BACKEND_IMAGES_ENDPOINT}/images`
    },
  },
})

I am using the IPX provider and could create a yarn patch to fix this issue for my specific case:

diff --git a/dist/runtime/ipx.mjs b/dist/runtime/ipx.mjs
index dcc2d58828a92d01722267ec8e744799cbc14aad..eb928b04b0687d9a0a5430c02546a3915e908a31 100644
--- a/dist/runtime/ipx.mjs
+++ b/dist/runtime/ipx.mjs
@@ -4,7 +4,18 @@ import { lazyEventHandler, useBase } from "h3";
 import { isAbsolute } from "pathe";
 import { useRuntimeConfig } from "#imports";
 export default lazyEventHandler(() => {
-  const opts = useRuntimeConfig().ipx || {};
+  const config = useRuntimeConfig()
+
+  let opts = config.ipx || {};
+  opts = {
+    ...opts,
+    http: { domains: [config.public.BACKEND_IMAGES_ENDPOINT] },
+    alias: {
+      "/images": `${config.public.BACKEND_IMAGES_ENDPOINT}/images`,
+    },
+  }
+ 
   const fsDir = opts.fs?.dir ? isAbsolute(opts.fs.dir) ? opts.fs.dir : fileURLToPath(new URL(opts.fs.dir, import.meta.url)) : void 0;
   const fsStorage = opts.fs?.dir ? ipxFSStorage({ ...opts.fs, dir: fsDir }) : void 0;
   const httpStorage = opts.http?.domains ? ipxHttpStorage({ ...opts.http }) : void 0;

This is obviously bad, but hopefully helps you understand my issue better.

[alexan]

is there any new regarding this?