Before you start
You need a Meeko application, Node.js 24 or later and Meeko
>=1.8 <2. The i18n module ships separately; you can use it with your application's components.
pnpm add @meekojs/i18nConfigure the module
import { defineMeekoConfig } from '@meekojs/meeko/framework'
export default defineMeekoConfig({
site: 'https://example.com',
modules: ['@meekojs/i18n'],
i18n: {
defaultLocale: 'es',
catalogs: {
es: 'app/locales/es.json',
en: 'app/locales/en.json',
},
},
})
Catalog paths are relative to the project root and must stay inside it.
defaultLocale
must name one of the configured languages.
Create the catalogs
{
"greeting": "Hola {name}",
"ready": "Listo para traducir",
"cart": {
"items": {
"plural": "total",
"forms": {
"=0": "Tu cesta está vacía",
"one": "{count} elemento en tu cesta",
"other": "{count} elementos en tu cesta"
}
}
}
}{
"greeting": "Hello {name}",
"ready": "Ready to translate",
"cart": {
"items": {
"plural": "total",
"forms": {
"=0": "Your cart is empty",
"one": "{count} item in your cart",
"other": "{count} items in your cart"
}
}
}
}
Both languages declare the same keys and parameters. The structure of
cart
produces the key
cart.items.
Translate in a component
<script lang="ts">
const { t } = useI18n()
const name = signal('Meeko')
</script>
<template>
<p>{t('greeting', { name: name.value })}</p>
<p>{t('cart.items', { total: 3 })}</p>
</template>
useI18n
is auto-imported in components once the module is registered. It also supports an explicit import from
@meekojs/i18n. The plugin provides one instance per application and SSR request.
After changing the catalogs, run
meeko check
to verify the generated contract. Do not edit the types in
.meeko
by hand.
Continue with messages and parameters or try the playground.