@pezak/hui-i18n NPM

`hui-i18n`

Harry's UI (hui) i18n (internationalization) package. Configures vue-i18n under the hood. Providers composables such as useMessages and SEO utils.

Most strong key point for this package is that I override the t function, so that it properly types the MessageKeys provided.

✨ Release Notes

Installation

Install the module to your Nuxt application with one command:

npx nuxi module add @pezak/hui-i18n

Define i18n Config

In your /config folder, create a i18n.config.ts file that is meant to both provide for hui-i18n and the behind-the-scenes vueI18n.

Keep in mind to add as const on the two arrays for proper typing capabilities.

export const locales = [
  { code: "bg", iso: "bg-BG", name: "Български", abbr: "bg" },
  { code: "en", iso: "en-UK", name: "English", abbr: "en" },
] as const;
export const defaultLocale = "bg";
export const messageKeys = ["opa", "notFound"] as const;

// VueI18n Config Export
export default {
  legacy: false,
  locale: defaultLocale,
  messages: {},
};

Config the locales if you need to add/remove. Change the defaultLocale if needed.

And then during development, just add keys in messageKeys. This will automatically add a field in Global/Translations in Sanity where you need to add the actual translation message.

My current stack uses Sanity for CMS which provides the translation records. Thus we pass messages as an empty object, as it will be populated by loadMessages later.

If you wish to use it without Sanity and just straight out vueI18n, then define the messages object properly and omit the messageKeys array.

Usage

The package mainly provides the useMessage composables and some useful types.

const { loadMessages, t, l } = useMessages();

// If you use Sanity, which is expected to be the default.
// in app.vue
const translationsQuery = groq`
  *[_id == "translations"][0]
`;
const { data } = await useSanityQueryT<{
  ...,
  translations: Translations;
}>(`{
  ...,
  "translations": ${translationsQuery},
}`);

await loadMessages(data.value.translations);

// In all components, composables and pages
const msg = t('someMgsKey'); // this is typed, will throw error if key is not in messageKeys array

// l function is meant to translate LocaleFields provided from Sanity
const name: string = l(project.name);
const desc: Block[] = l(project.description);

Import interfaces for localised fields.

import type {
  LocaleString,
  LocaleBlocks,
  Messages,
  Translations,
} from "@pezak/hui-i18n";

Use auto-imported types as LangCode and MessageKey

Configuring hui-i18n

The package automatically detects and uses ./config/i18.config.ts file to configure itself.

If you want to change the file name or location, or file structure. Then you can access the config and provide the custom path and options.

// nuxt.module.ts
{
  modules: [ ..., "@pezak/hui-i18n" ],

  huiI18n: {
    vueI18n: "./msgsConfig.ts",
    // other @nuxtjs/i18n config options
  }
}