Nuxt•2mo ago

How to send current locale to an api route with nuxt i18n

We are writting a new app using Nuxt and @nuxtjs/i18n. We have multiple domains with different languages. Is there a way to automatically attach the current locale to the every request sent to the middleware?

5 Replies

kapa.ai•2mo ago

Hi @anj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The knowledge sources do not provide a direct, built-in way in Nuxt or @nuxtjs/i18n to automatically attach the current locale to every API request or middleware call. However, you can access the current locale using the i18n composable (useI18n()) and then manually include it in your API requests. For example, you can get the current locale like this:

const { locale } = useI18n()

const { locale } = useI18n()

When making an API call (e.g., using fetch or $fetch), you can attach the locale as a header or a query parameter:

const { locale } = useI18n()
const response = await $fetch('/api/your-endpoint', {
  headers: {
    'x-locale': locale.value
  }
})

const { locale } = useI18n()
const response = await $fetch('/api/your-endpoint', {
  headers: {
    'x-locale': locale.value
  }
})

Or as a query parameter:

const { locale } = useI18n()
const response = await $fetch(`/api/your-endpoint?locale=${locale.value}`)

const { locale } = useI18n()
const response = await $fetch(`/api/your-endpoint?locale=${locale.value}`)

If you want to automate this for all requests, you would typically set up a composable or a plugin to intercept requests and add the locale. However, the knowledge sources do not provide a ready-made solution or example for this pattern. Summary:
You need to manually attach the current locale to your API requests using the value from useI18n(). There is no automatic or built-in way documented in the provided sources to do this for every request in Nuxt with @nuxtjs/i18n. If you need to handle content localization on the server side, you can also organize your content and API logic based on the locale, as shown in the Nuxt Content + i18n integration example, where the current locale is used to fetch the appropriate content collection for each request Docs: Nuxt Content i18n integration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

___anj___OP•2mo ago

@kapa.ai how can I then detect that locale on the server endpoint?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To detect the locale on the server endpoint in Nuxt, you should look for the value you attached to the request—either in the headers or as a query parameter. If you send the locale as a header (e.g., x-locale): You can use the useRequestHeaders or useRequestHeader composable to access incoming request headers in your server API route:

export default defineEventHandler((event) => {
  const locale = useRequestHeader('x-locale')
  // Now you can use the locale value in your logic
  return { locale }
})

export default defineEventHandler((event) => {
  const locale = useRequestHeader('x-locale')
  // Now you can use the locale value in your logic
  return { locale }
})

Docs: useRequestHeader If you send the locale as a query parameter: You can access query parameters from the event object:

export default defineEventHandler((event) => {
  const locale = getQuery(event).locale
  // Use the locale value as needed
  return { locale }
})

export default defineEventHandler((event) => {
  const locale = getQuery(event).locale
  // Use the locale value as needed
  return { locale }
})

Note:
- useRequestHeader and useRequestHeaders only work on the server side and will return undefined or an empty object in the browser. - Make sure your client-side code is actually sending the locale as a header or query parameter as described previously. The knowledge sources confirm this approach for accessing headers and query parameters in server endpoints, but do not mention any automatic locale detection from @nuxtjs/i18n on the server side—you must explicitly send and read the value as shown above Docs: useRequestHeader Docs: useRequestHeaders. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

How to send current locale to an api route with nuxt i18n

Did you find this page helpful?