I’m running a Nuxt 3 app in a Docker container, and I’m having an issue where useRuntimeConfig().public.apiUrl is undefined when navigating from an SSR page to a non-SSR page. However, it works correctly on a hard refresh.

Works fine locally in dev mode (bun dev) and even when I run nuxt build on my Mac.

Breaks in production inside Docker.

Docker setup:

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - HOST=0.0.0.0
      - NUXT_PUBLIC_API_URL=/api

Nuxt Config

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiUrl: process.env.NUXT_PUBLIC_API_URL,
    },
  },
  routeRules: {
    "*/map": { ssr: false },
  },
});

Api service(composable)

import axios from "axios";
import { useRuntimeConfig } from "#app";

export function useApiService() {
  const config = useRuntimeConfig();

  return axios.create({
    baseURL: config.public.apiUrl,
    headers: { "Content-Type": "application/json" },
    withCredentials: true,
  });
}

The problem

• Navigating from an SSR page (index.vue) to a non-SSR page (map.vue) causes useRuntimeConfig().public.apiUrl to become undefined.

• However, if I hard refresh the non-SSR page (map.vue), it works correctly.

Has anyone faced this issue before? How do I ensure that NUXT_PUBLIC_API_URL persists during client-side navigation?