How to `useI18n` in `/server`? #1950

varna · 2023-03-24T13:33:02Z

varna
Mar 24, 2023

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

useI18n is undefined
After forcing import, errors out with Must be called at the top of a 'setup' function
Should be able to override locale, i.e. t(key, locale)
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 · 2023-04-05T17:45:49Z

anthonycherbuin
Apr 5, 2023

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.

2 replies

gnidustotalus Apr 20, 2023

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

tmlmt Oct 1, 2023

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

tmlmt · 2023-10-03T03:26:37Z

tmlmt
Oct 3, 2023

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.

0 replies

oripka · 2023-11-18T17:10:29Z

oripka
Nov 18, 2023

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.

0 replies

tmlmt · 2023-11-23T20:45:54Z

tmlmt
Nov 23, 2023

@kazupon has started working on it! #2558

0 replies

tmlmt · 2023-12-08T01:20:20Z

tmlmt
Dec 8, 2023

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

1 reply

DavidDeSloovere Dec 12, 2023

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

hz2222 · 2025-09-05T14:47:53Z

hz2222
Sep 5, 2025

This is working for me:

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

0 replies

Uh oh!

How to useI18n in /server? #1950

Uh oh!

Uh oh!

Problems

References (tag later)

Replies: 6 comments · 3 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

How to `useI18n` in `/server`? #1950

Replies: 6 comments 3 replies