How to useI18n in /server?

[varna]

Hi,

I'd like to translate some server API calls:

import { useI18n } from "vue-i18n";

export default defineEventHandler(async (event) => {
  if (!event.context.params?.locale) {
    throw createError({
      statusCode: 400,
      statusMessage: "locale is not provided",
    });
  }

  const { t } = useI18n()
  const categories = await $fetch(`/api/categories`)

  for (const id in categories) {
    categories[id].name = t(categories[id].name)
  }

  return categories;
});

Problems

1. useI18n is undefined
2. After forcing import, errors out with Must be called at the top of a 'setup' function
3. Should be able to override locale, i.e. t(key, locale)
4. Should load files from /assets, i.e. with config:

    ['@nuxtjs/i18n', {
      strategy: 'no_prefix',
      defaultLocale: 'en',
      langDir: 'assets/locales',
      lazy: true,
      locales: [
        {
          code: 'en',
          name: 'English',
          files: ['en.json']
        },
        {
          code: 'lt',
          name: 'Lithuanian',
          files: ['lt.json']
        }
      ],
      vueI18n: {
        fallbackLocale: 'en'
      }
    }]

References (tag later)

https://stackoverflow.com/questions/74995135/how-to-use-usei18n-on-server-api-directory

[anthonycherbuin]

Hello @varna, I don't know if this will work for the server side but here is how I fixed the error _Must be called at the top of a 'setup' function_

Create a Nuxt3 plugin and add the following:

export default defineNuxtPlugin((nuxtApp) => {

  const i18n = nuxtApp.$i18n;

  const modules  = {
    i18n: i18n
  };

  return {
    provide: {
      i18n: modules,
    },
  };
});

You can then access your i18n Instance, example:

const { $api } = useNuxtApp();
$i18n.i18n.locale.value

I hope this can help you.

[damvik]

It doesn't make sense. You have already provided $i18n to nuxtApp why are you doing it again?

[tmlmt]

I agree with @gnidustotalus and useNuxtApp() is not available in Nitro handlers (/server/api).
Does anyone have an answer for this question?

[tmlmt]

useI18n is not available in the Nitro context. I found a way to make it work by adding a file in /server/utils which recreates a I18n instance in Nitro that is automatically imported in /server/api/.

In your case, this would be /server/utils/i18n.ts

import { createI18n } from "vue-i18n";
import type { I18nOptions } from "vue-i18n";

import lt from "../../assets/locales/lt.json";
import en from "../../assets/locales/en.json";

const messages: I18nOptions["messages"] = Object.assign({
  lt: lt,
  en: en,
});

const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages,
});

export const { t, locale } = i18n.global;

and your api event handler would be modified this way:

export default defineEventHandler(async (event) => {
  if (!event.context.params?.locale) {
    throw createError({
      statusCode: 400,
      statusMessage: "locale is not provided",
    });
  }

  locale.value = event.context.params?.locale
  const categories = await $fetch(`/api/categories`)

  for (const id in categories) {
    categories[id].name = t(categories[id].name) // t is auto-imported
  }

  return categories;
});

This might not be the most performant way to proceed as I'm not fully acquainted with the way Nitro/Nuxt is structured, but it works.

[oripka]

I just did this:

// Translations
const translations = {
  en: {
    emailSubjectUser: "Confirmation of Registration for {eventName}",
    emailSubjectOrganizer: "New signup for {eventName}",
    emailGreeting: "Dear {firstName} {lastName},",
    // ... other English translations
  },
  de: {
    emailSubjectUser: "Anmeldebestätigung für {eventName}",
    emailSubjectOrganizer: "Neue Anmeldung für {eventName}",
    emailGreeting: "Sehr geehrte/r {firstName} {lastName},",
    // ... other German translations
  },
  // ... other languages if needed
};

// Custom translation function
function t(key, params = {}, locale = 'en') {
  let translation = translations[locale][key] || translations['en'][key];
  Object.keys(params).forEach(param => {
    translation = translation.replace(new RegExp(`{${param}}`, 'g'), params[param]);
  });
  return translation;
}

  const subject = t('emailSubjectUser', { eventName: event.eventname }, locale);
  const greeting = t('emailGreeting', { firstName: form.firstname, lastName: form.lastname }, locale);
  const thankYou = t('thankYouForRegistration', { eventName: event.eventname }, locale);

Avoiding the the module.

[tmlmt]

@kazupon has started working on it! #2558

[tmlmt]

This is now possible since v8.0.0-rc.8
See documentation

[DavidDeSloovere]

@varna I think this is your anwser. If you agree, can you mark it?

[hz2222]

This is working for me:

export default defineEventHandler(async (event) => {
const lang = event.context.nuxtI18n?.vueI18nOptions?.locale