Module Kit
Module Kit translations
Ship a module's strings as locale files, and override any module string from your app.
This page shows how a module ships its strings (for module authors) and how an app changes them (for app developers). Set up the module first: Overview.
Shipping translations
A module ships one JSON file per locale, and @nuxtjs/i18n merges every module's file into one message tree.
| Helper | Signature | Purpose |
|---|---|---|
registerLocales | (nuxt: Nuxt, langDir: string, codes?: string[]) => void | Registers <langDir>/<code>.json for each code, da and en by default. |
useModuleT | (namespace: string) => (key: string, fallback: string, params?: Record<string, string | number>) => string | Translates <namespace>.<key>, or returns the English fallback. |
registerLocales skips a missing file, and does nothing without @nuxtjs/i18n.
useModuleT is auto-imported. It replaces {param} placeholders in the translation and the fallback alike.
// in setup(options, nuxt)
registerLocales(nuxt, resolver.resolve('./runtime/i18n/lang')) // reads da.json / en.json
const t = useModuleT('events')
t('ongoing.title', 'Happening now')
t('detail.tickets.atLeastOneProductRequired', '{addonTitle} is required.', { addonTitle })
Put every key under the module's namespace, such as
users.* or events.*, so modules never collide. A @:path
link can still point at a key of another module.Overriding module strings in your app
Override any string in your app's i18n/locales/<code>.json. No module option is needed:
i18n/locales/en.json
{
"payments": {
"status": { "paid": "Payment received" }
},
"forms": {
"actions": { "submit": "Send inquiry" }
}
}
- A module's full key list is its
src/runtime/i18n/lang/en.json. - List only what you change. Messages are deep-merged, so every other key keeps the module's text.
- Your app wins.
@nuxtjs/i18nmerges module files, then extended layers, then your app's files. Overrides work even for a locale a module does not ship. - Keep parameters such as
{date}or{plan}in your text. The component fills them in. - Without
@nuxtjs/i18n, nothing is registered and components show their English fallbacks.
Next steps
- Module Kit – the other helpers a module calls in
setup(). - Base Layer – turn on localization for a website.