More guides for edge runtimes

[leonceaklin]

Dear Intlify team

Thank you for creating this package. Being able to share i18n between frontend-apps and API's is something I always wanted.

However I am struggling to set everything up in edge runtimes (in my case Hono on Cloudflare Workers).
It seems to me that most things explained in the how-to don't work on the edge. Therefore I would be happy to have more how-tos specifically for edge environments. (How to set up Vite, compilation of the strings and so on…).

Best regards

[MickL]

I am not from the Intlify team but could you explain further what "things" exactly "don't work"? Otherwise it will be hard to help you. I would imagine it should run fine on edge runtimes.

[leonceaklin]

Hi @MickL, thank you for jumping in!

To clarify, the main friction point was setting up the compilation of the translation strings for the edge runtime. I originally looked at this readme and tried to import my translation keys as a standard JS module, but it failed during the production/preview build.

Initial approach (failed in preview)

My project initially used Cloudflare Wrangler as a dev server. I saw that messages can be defined via the messages key and since I already had a js file with translation keys from the frontend, I copied that and imported it like this:

import { defineIntlifyMiddleware, detectLocaleFromAcceptLanguageHeader } from "@intlify/hono"

import en_GB from "./lang/en-GB.js"

export const i18nMiddleware = defineIntlifyMiddleware({
  locale: detectLocaleFromAcceptLanguageHeader,
  fallbackLocale: 'en-GB',
  messages: {
    'en-GB': en_GB
  }
})

This worked fine in the dev server but failed in preview. The translations would not display.
Instead, the naked keys would show up.

My workaround

After some trial and error, I managed to get it working by migrating the project to use Vite and relying on VueI18nPlugin to handle the string compilation.

Setup in vite.config.ts

VueI18nPlugin({
  include: [
    fileURLToPath(new URL('./src/i18n/lang/**', import.meta.url))
  ],
  runtimeOnly: true,
})

Updated middleware:

import { defineIntlifyMiddleware, detectLocaleFromAcceptLanguageHeader } from "@intlify/hono"
import messages from '@intlify/unplugin-vue-i18n/messages'

export const i18nMiddleware = defineIntlifyMiddleware({
  locale: detectLocaleFromAcceptLanguageHeader,
  fallbackLocale: 'en-GB',
  messages: messages
})

While this works now, it took quite a bit of digging to figure out. That's why I think a dedicated "How-To" detailing this specific Vite/compilation setup for edge environments like Cloudflare Workers would be a huge help to others.

Best regards
Léonce

[MickL]

Not sure why this shouldnt work? Whatever build tool you use should resolve the import and bundle the messages I guess. I do the same thing as you btw:

import { intlify } from '@intlify/nitro';
import de from '../i18n/locales/de';
import en from '../i18n/locales/en';
import es from '../i18n/locales/es';
import fr from '../i18n/locales/fr';
import nl from '../i18n/locales/nl';

export default intlify({
    locale: (event) => event.context.locale,
    fallbackLocale: ['en', 'de'],
    messages: {
      de,
      en,
      es,
      fr,
      nl,
    },
  });
  locale: (event) => event.context.locale,
})