vtex-io-messages-and-i18n

To manage translations in a VTEX IO app, source user-facing text from the vtex.messages system. Define translation keys in /messages/context.json and per-locale JSON files to centralize localization across storefront, admin, and backend flows.

The vtex.messages system is a VTEX IO infrastructure that centralizes runtime localization. It uses a context.json file to define app-scoped keys and per-locale JSON files to provide actual translations, ensuring consistent user-facing copy across React, Admin, and GraphQL layers.

To set up the messages builder, create a minimal /messages directory containing a context.json file and an en.json file with app-scoped translation keys. This structure ensures scalable localization and prevents key collisions across storefront and admin interfaces.

Yes, the vtex.messages system applies across storefront React components, Admin UIs, and backend services. By centralizing keys in context.json, you ensure consistent translations and avoid hardcoded strings throughout all VTEX IO application flows.

Translation key collisions occur when localization is unstructured. To avoid key collisions in VTEX IO, define app-scoped translation keys within the /messages/context.json file and organize translations into per-locale JSON files using the messages builder.