Learn how to integrate Localazy with Vue.js and vue-i18n using the CLI. This guide covers configuration, uploading source files, and downloading translations.

What you’ll need #️⃣

This guide uses vue-i18n (v9 or later, for Vue 3) and JSON files.

  • A Vue 3 project with vue-i18n installed and configured
  • Localazy CLI installed
  • Strings externalized into a source file, for example src/assets/locales/en.json

Set up the Localazy configuration file #️⃣

Create a localazy.json file in your project root:

{
 "writeKey": "your-write-key",
  "readKey": "your-read-key",
  "upload": {
    "type": "json",
    "files": "src/assets/locales/en.json",
    "features": ["plural_pipeline"]
  },
  "download": {
    "files": "src/assets/locales/${lang}.json"
  }
}

Replace the keys with your actual keys from your Localazy project settings.

The plural_pipeline feature makes Localazy read vue-i18n pipe plurals, such as "one item | {count} items", as plural strings. Remove it if your project does not use pipe plurals. Nested JSON objects work without extra configuration.

Upload source files #️⃣

localazy upload

This command uploads en.json to your Localazy project.

Download translated files #️⃣

localazy download

This command writes one file per language to src/assets/locales/, for example fr.json and de.json.

Next steps #️⃣

  • Translate your strings in Localazy, then run localazy download again to get the latest translations.
  • vue-i18n does not load new files automatically. Import each downloaded file and add it to messages in createI18n.
  • The locale code in your app must match the file name. For example, fr.json loads when locale.value is "fr".
  • vue-i18n selects pipe plural forms by position. For languages with more than two plural forms (for example Czech or Polish), define pluralRules in createI18n. (Read more)
  • vue-i18n uses @, {, }, and | as special characters. To show them as text, use literal interpolation, for example {'@'}.
  • Read the JSON format documentation for all features and plural types.
  • For a full walkthrough with a demo app and GitHub Actions, read How to localize your Vue.js app with vue-i18n and Localazy.
  • If you have trouble integrating, contact us at team@localazy.com.