Nuxt•6d ago

Dynamic baseUrl in i18n config in nuxt.config.ts

Hello! i am trying to use a dynamic baseUrl, passing a function, but it throws that it is not serializable, could someone help me to fix it? This is my code:

i18n: {
    vueI18n: 'i18n.config.ts',
    strategy: 'prefix',
    baseUrl: (context) => {
      if (import.meta.server) {
        const { req, beforeNuxtRender } = context;
        beforeNuxtRender(({ nuxtState }) => {
          nuxtState.host = req.headers.host;
        });
      }
      return (
        'https://'
        + (import.meta.server ? context.req.headers.host : context.nuxtState.host)
      );
    },
    defaultLocale: 'es',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root'
    },
    locales: [
      {
        code: 'en',
        file: 'en.json',
        language: 'en-US',
        name: 'English'
      },
      {
        code: 'es',
        file: 'es.json',
        language: 'es-AR',
        name: 'Español'
      },
      {
        code: 'pt',
        file: 'pt.json',
        language: 'pt-PT',
        name: 'Português'
      }
    ],
    lazy: true
  },

i18n: {
    vueI18n: 'i18n.config.ts',
    strategy: 'prefix',
    baseUrl: (context) => {
      if (import.meta.server) {
        const { req, beforeNuxtRender } = context;
        beforeNuxtRender(({ nuxtState }) => {
          nuxtState.host = req.headers.host;
        });
      }
      return (
        'https://'
        + (import.meta.server ? context.req.headers.host : context.nuxtState.host)
      );
    },
    defaultLocale: 'es',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root'
    },
    locales: [
      {
        code: 'en',
        file: 'en.json',
        language: 'en-US',
        name: 'English'
      },
      {
        code: 'es',
        file: 'es.json',
        language: 'es-AR',
        name: 'Español'
      },
      {
        code: 'pt',
        file: 'pt.json',
        language: 'pt-PT',
        name: 'Português'
      }
    ],
    lazy: true
  },

I tried with this: baseUrl: (context) => { return 'https://test.com'; }, and didnt work too

8 Replies

kapa.ai•6d ago

Hi @bauti. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You cannot use a function for the i18n baseUrl property in your nuxt.config.ts because Nuxt config is serialized and passed to the server and client, and only serializable values (like strings, numbers, objects, arrays) are allowed. Functions, Sets, Maps, etc., are not serializable and will cause errors—this is a documented limitation of Nuxt's runtime config and module options system. From the official Nuxt documentation:

Your runtime config will be serialized before being passed to Nitro. This means that anything that cannot be serialized and then deserialized (such as functions, Sets, Maps, and so on), should not be set in your nuxt.config.<br>

Nuxt Docs: Runtime Config The same applies to module options like those for @nuxtjs/i18n. The baseUrl must be a string, not a function. How to set a dynamic baseUrl? - You should set baseUrl to a string, typically using an environment variable or runtime config. - If you need to set it dynamically based on the request (e.g., for SSR with multiple domains), you should use Nuxt's runtime config and set the value via environment variables at runtime, not via a function in the config. Example using runtime config:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      baseUrl: process.env.NUXT_PUBLIC_BASE_URL || '<https://default.com'>
    }
  },
  i18n: {
    // ...other options
    baseUrl: process.env.NUXT_PUBLIC_BASE_URL || '<https://default.com',>
    // ...
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      baseUrl: process.env.NUXT_PUBLIC_BASE_URL || '<https://default.com'>
    }
  },
  i18n: {
    // ...other options
    baseUrl: process.env.NUXT_PUBLIC_BASE_URL || '<https://default.com',>
    // ...
  }
})

Then, set the environment variable NUXT_PUBLIC_BASE_URL at runtime for each environment or deployment. Summary:
You cannot use a function for baseUrl in Nuxt config. Use a string, ideally from an environment variable or runtime config, to achieve dynamic behavior per environment or deployment. If you need per-request logic, you may need to handle it in middleware or plugins, not in the config itself.
Nuxt Docs: Runtime Config ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@841748336443916289> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bautiOP•6d ago

@kapa.ai But i need to use the current host on it, i dont have it on a enviroment variable

kapa.ai•6d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You cannot directly use the current host (from the request) in your Nuxt config or in the i18n module options, because these values must be serializable and are set at build time, not per request. Functions are not allowed in the config for this reason, and the host is not available at build time—only at runtime during a request. The knowledge sources confirm that only serializable values (like strings) are allowed in Nuxt config, and dynamic values like the current host must be handled differently. The recommended approach is to use environment variables or runtime config, but if you don't have the host in an environment variable, you cannot set it in the config at build time. This is a limitation of how Nuxt serializes and uses config values Nuxt Docs: Runtime Config. If you need to use the current host, you would have to handle it at runtime, for example, in server middleware or in your application logic, not in the Nuxt config or i18n module options. The knowledge sources do not provide a built-in way to inject the current request host into the i18n baseUrl via config. Summary:
You cannot set baseUrl to the current host in nuxt.config.ts because the host is only available at runtime, and the config must be serializable. The knowledge sources do not provide a supported way to achieve this directly in the config. You may need to handle this logic elsewhere in your application, such as in middleware or plugins, but this is not covered in the provided sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@841748336443916289> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bautiOP•6d ago

@kapa.ai And what would you do to meet my goal? i.e., have all nuxt seo tags use the current host. currently, despite my attempts to replace it, the nuxt i18n host still has priority.

kapa.ai•6d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, Nuxt’s SEO meta system (including Open Graph tags) is designed to be dynamic and reactive at runtime, but the Nuxt config and module options (like i18n’s baseUrl) must be serializable and cannot use runtime values such as the current request host. This means you cannot set the current host in nuxt.config.ts for i18n or for global SEO tags directly Nuxt Docs: Runtime Config. What you can do for SEO tags: For SEO meta tags, you can use the useHead or useSeoMeta composables in your page components or layouts, and dynamically set the host using runtime logic. For example, you can access the current host from the request headers on the server side and construct your canonical URLs or Open Graph URLs accordingly:

<script setup lang="ts">
const route = useRoute()
let host = ''

if (import.meta.server) {
  // On server, get host from request headers
  const event = useRequestEvent()
  host = event?.req?.headers?.host || 'default.com'
} else {
  // On client, use window.location
  host = window.location.host
}

const canonicalUrl = computed(() => `<https://${host}${route.fullPath}`>)

useSeoMeta({
  ogUrl: () => canonicalUrl.value,
  // ...other tags
})
</script>

<script setup lang="ts">
const route = useRoute()
let host = ''

if (import.meta.server) {
  // On server, get host from request headers
  const event = useRequestEvent()
  host = event?.req?.headers?.host || 'default.com'
} else {
  // On client, use window.location
  host = window.location.host
}

const canonicalUrl = computed(() => `<https://${host}${route.fullPath}`>)

useSeoMeta({
  ogUrl: () => canonicalUrl.value,
  // ...other tags
})
</script>

This way, your SEO tags will always use the current host, regardless of what is set in the i18n config. About i18n’s baseUrl: The i18n module’s baseUrl option must be a string and is used for generating alternate/hreflang/canonical links. Since you cannot set it dynamically per request in the config, the knowledge sources do not provide a built-in way to override this behavior at runtime. If i18n’s generated tags are not correct, you may need to disable their generation and handle SEO tags yourself using the approach above. Summary:
- Use useSeoMeta or useHead in your components/layouts to set SEO tags with the current host at runtime. - You cannot set i18n’s baseUrl dynamically per request in the config. - If i18n’s tags are incorrect, consider disabling them and managing SEO tags yourself. The knowledge sources do not provide a way to make i18n’s baseUrl dynamic per request, so handling SEO tags manually is the most reliable approach within Nuxt’s current capabilities Nuxt Docs: SEO and Meta Nuxt Docs: Runtime Config. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@841748336443916289> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Dynamic baseUrl in i18n config in nuxt.config.ts

Did you find this page helpful?