vue-i18n JSON

vue-i18n stores its translations as JSON files whose values use the vue-i18n message format—a syntax of its own that differs from ICU.

To get started, install the format package:

npm install -D @eloqnt/format-vue-i18n-json

Then reference it from your configuration:

import {defineConfig} from '@eloqnt/cli';

export default defineConfig({
  messages: {
    path: './src/locales/{locale}',
    locales: 'infer',
    sourceLocale: 'en',
    format: {
      codec: '@eloqnt/format-vue-i18n-json',
      extension: '.json'
    }
  }
});

This matches files like src/locales/en.json.

A project with one folder per locale can use {namespace} instead.

Interpolation

Named interpolation ({name}), list interpolation ({0}), and rails-style interpolation (%{name}) are parsed as ICU arguments for operations like eloqnt lint and eloqnt translate:

{
  "greeting": "Hello, {name}!"
}

Unlike ICU, vue-i18n has no apostrophe escaping—apostrophes are plain text. A message like '{name}' keeps its argument, so e.g. a translation that drops it is reported.

Literal interpolation renders special characters, and the codec converts it to the text it renders:

{
  "email": "Reach us at support{'@'}example.com"
}

Backslash escapes (\{, \|, available since vue-i18n@11.3) are read the same way, so \{order_id\} parses as the literal text {order_id}.

Translations written back get the same escaping applied, so a literal {, }, or @ in a translated message is escaped again—in the style the source message uses, backslash escapes or literal interpolation.

Plural forms

vue-i18n spells plurals as one message with forms separated by |:

{
  "cart": "{n} item | {n} items"
}

The forms stay part of one message value instead of mapping to an ICU plural.

Linked messages

Linked messages (@:key, @.upper:key) stay literal text in the parsed message. The linked message's own placeholders are checked at its own key, and a translation keeps the link by carrying the reference along.

Not supported

The following features are not supported:

• Custom plural rules awareness: Plural forms pass through as text either way, so custom rules don't affect checks.
• srcPath: Source code analysis is currently limited to next-intl.