Skip to content

feat: allow to edit image config at runtime #1118

Open
@oemer-aran

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions