Server-Side Translations

You can do the translation on the server-side and return it as a response. The locale messages defined in nuxt i18n module options are integrated, so all you need to do is configure the locale detector.

Define locale detector

For server-side translation, you need to define a locale detector.

Nuxt i18n exports the defineI18nLocaleDetector() composable function to define it.

The following is an example of how to define a detector that detects locale using query, cookie, and header:

// Detect based on query, cookie, header
export default defineI18nLocaleDetector((event, config) => {
  // try to get locale from query
  const query = tryQueryLocale(event, { lang: '' }) // disable locale default value with `lang` option
  if (query) {
    return query.toString()
  }

  // try to get locale from cookie
  const cookie = tryCookieLocale(event, { lang: '', name: 'i18n_locale' }) // disable locale default value with `lang` option
  if (cookie) {
    return cookie.toString()
  }

  // try to get locale from header (`accept-header`)
  const header = tryHeaderLocale(event, { lang: '' }) // disable locale default value with `lang` option
  if (header) {
    return header.toString()
  }

  // If the locale cannot be resolved up to this point, it is resolved with the value `defaultLocale` of the locale config passed to the function
  return config.defaultLocale
})

The locale detector function is used to detect the locale on the server-side. It's called per request on the server.

The defineI18nLocaleDetector() composable and the @intlify/utils/h3 utilities used in the example are auto imported. If you have auto imports disabled you can import these explicitly from #imports:

import { defineI18nLocaleDetector, tryCookieLocale, tryHeaderLocale, tryQueryLocale } from '#imports'

When you define the locale detector, you need to pass the path to the locale detector to the experimental.localeDetector option.

The following is an example of a locale detector configuration defined directly in the Nuxt application:

export default defineNuxtConfig({
  i18n: {
    experimental: {
      localeDetector: 'localeDetector.ts'
    }
  }
})

For details on the locale detector function defined by defineI18nLocaleDetector(), see here.

useTranslation() on eventHandler

To translate on the server-side , you need to call useTranslation().

Example:

// you need to define `async` event handler
export default defineEventHandler(async event => {
  // call `useTranslation`, so it return the translation function
  const t = await useTranslation(event)
  return {
    // call translation function with key of locale messages,
    // and translation function has some overload
    hello: t('hello')
  }
})