Runtime config for baseUrl for multiple environments with same build

[toooni]

Hi everyone,

We’re currently using Imgix as our image provider. Our website is built with Nuxt, but at the moment we’re not using the @nuxt/image module.

As part of our ongoing development, I’m working on a new backend and plan to integrate @nuxt/image moving forward. Our CI/CD pipeline builds Docker images for the application, which are then deployed to our Kubernetes infrastructure.

The issue we’re facing is that we use the same Docker image for both staging and production environments. Since the configuration for @nuxt/image—specifically the baseURL for Imgix—is determined at build time, this becomes problematic. Our staging and production environments each have different Imgix base URLs, so hardcoding one at build time isn’t a viable solution.

My question is:
Is there a way to dynamically set the baseURL (or other @nuxt/image config options) at runtime using environment variables? Wouldn’t it be more flexible if these configurations could be modified globally at runtime instead of being locked at build time?

Appreciate any insights or recommendations on best practices here...

Thanks in advance!

[yudin-s]

For a single Docker image promoted through staging and production, I would not hardcode the Imgix base URL directly into nuxt.config provider options.

The clean workaround is a small custom provider that reads runtime config when it builds the URL:

// providers/imgix-runtime.ts
import { joinURL, withQuery } from "ufo"
import { createOperationsGenerator, defineProvider } from "@nuxt/image/runtime"

const operationsGenerator = createOperationsGenerator()

export default defineProvider({
  getImage(src, { modifiers }) {
    const config = useRuntimeConfig()
    const baseURL = config.public.imgixBaseURL
    const operations = operationsGenerator(modifiers)

    return {
      url: withQuery(joinURL(baseURL, src), operations),
    }
  },
})

Then:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      imgixBaseURL: "",
    },
  },
  image: {
    providers: {
      imgixRuntime: {
        provider: "~/providers/imgix-runtime.ts",
      },
    },
  },
})

and set NUXT_PUBLIC_IMGIX_BASE_URL differently per environment.

The important caveat is that anything used in the browser-generated image URL is public. Runtime config solves “same build, different environment”, not secrecy.