Vue.js localization #️⃣

Vue.js is a progressive JavaScript framework for building user interfaces through composable components. For internationalization, most Vue projects rely on vue-i18n, the official i18n plugin that handles translation loading, locale switching, and message formatting from JSON files. Localazy translates those JSON files and syncs them back into your project, working with both Vue 2 and Vue 3.

How Localazy works with Vue.js #️⃣

Upload your source locale file through the Localazy CLI, translate on the platform using Localazy AI and human reviewers, and download completed files back for vue-i18n to consume at runtime. No code changes needed.

  • Flat and nested JSON - message hierarchies matching your component structure parsed and preserved automatically.
  • vue-i18n syntax recognition - named interpolation, list interpolation, and linked messages handled correctly.
  • Interpolation protection - {variable}, {0}, and @:link references are protected during translation and validated before download.
  • Plural validation - pipe-separated plural rules checked so they stay syntactically correct per language.
  • CI/CD automation - localazy upload and localazy download fit into any CI/CD pipeline.

Helpful Localazy features for Vue translation #️⃣

Placeholder and linked-message protection #️⃣

vue-i18n messages mix variables, list indices, and cross-references to other keys. A translator who drops a {0} or rewrites @:common.appName breaks the message. Localazy detects and protects this syntax and flags issues before you download.

Structure integrity #️⃣

Downloaded files match your source JSON exactly (same nesting, same key paths), so route-based or feature-based locale files drop straight back into src/locales/ without any issues.

Format conversions #️⃣

Need the same strings in a Nuxt site or a mobile app? Download translations in any of 40+ formats from one Localazy project.

Vue.js + Localazy: Quick start guide

Learn how to use Vue.js with Localazy. Set up your localization workflow in minutes!

Read the guide

AI-driven translation
with human control

Bring your whole team inCollaborate with your colleagues, clients, or users without seat limits.
Establish a source of truth for your contextManage terminology, instructions, and style guides all in one place.
Let Localazy AI handle the first draftAutomatically generate new translations based on your context.
Get human reviewers to keep an eye on qualityHave our trusted native speakers review your translations as you go.
Localazy CLI: Automated localization for your project

Localazy CLI: Automated localization for your project

Designed for development teams, Localazy CLI provides advanced i18n automation capabilities to manage translations across your entire pipeline. Integrate  your project with Localazy CLI & align it to your current CI/CD workflows.

Try Localazy with a 14-day trial!

Sign up now and start translating!

Start now

Frequently Asked Questions

Yes it does! You might enjoy the fact that we are building the front-end of the Localazy platform with Vue.js and vue-i18n, and we are a proud sponsor of Kazupon, who is the creator of the library.

Integrating your project with Localazy is pretty straightforward, and you can do it in five short steps:

  1. Sign up and create your first project. 🚀

  2. From the list of integrations, choose Vue.js, install Localazy CLI, and configure vue-i18n. 👨‍💻

  3. Copy and modify this configuration into the localazy.json file in the root.

  4. Create a locales folder with a JSON file based on the source language. E.g., en.json 📂

  5. Run localazy upload in the CLI to upload your source file.

After you translate your strings to the desired languages, you can download the translations by running localazy download. 📂

Follow the whole tutorial How to localize Vue.js app with vue-i18n and Localazy on the Localazy Blog.

Last updated: 01/03/2023

Nuxt is a very popular web development framework built on top of Vue.js, and Localazy is ready to manage your Nuxt translations.

Nuxt helps you create modern web applications with serverside rendering, code-splitting, static generation, and many other features helpful in creating performant websites. With Localazy, you can now also easily manage your app translations in one place.

For internationalization, you can use, e.g., the official Nuxt/i18n or intlify/nuxt3 for your Nuxt 3 project. These libraries work together with Localazy to provide the most efficient and cost-effective localization possible.

Localazy provides a full stack of localization features such as machine translations, glossary management, tag and placeholder highlighting, and many others, making the lives of developers and translators easier.

On top of that, Localazy offers numerous integrations with many other popular tools and services, as well as professional translation services. All these features, combined with your Nuxt project, make localizing your project an easy job.

On our blog, you can read more about Nuxt localization with Localazy and get even more information about how to make the most of your Nuxt projects and Localazy.

Thanks to Nuxt and Localazy, you can now create modern applications with server-side rendering and internationalization quickly and efficiently.

Last updated: 01/03/2023

We recommend you visit the Localazy blog, where you can read numerous articles on Vue.js and Nuxt localization with Localazy.

You should also follow Kazupon, the creator of various i18n libraries for Vue.js, on Twitter. Remember also to check the official resources and GitHub repositories for updates.

Last updated: 01/03/2023

To download translations to their original locations, you can follow these steps. First, in the localazy.json configuration file and go to the download section. In this section, configure where you want to download your translations.

For a smoother process, ensure that you include the “path” parameter during the upload and use the same variable in the download section. Here’s an example of how to do it:

"upload": {
  "files": [
    {
      "pattern": "src/**/locale/en.ts",
      "lang": "inherited",
      "path": "${path}"
    }
  ]
},

"download": {
  "files": [
    {
      "output": "${path}/${lang}.ts"
    }
  ]
}

By setting the “path” parameter correctly, the translations will be downloaded to the respective locations specified in your localazy.json configuration file.

Last updated: 03/12/2025

Your projects can often contain multiple keys with the same content. Be it button labels across a large-scale information system, including keys on the backend and frontend or Android vs. iOS versions of your app. There are two ways to approach duplicate keys with Localazy.

The first option to consider when you have two or more projects that contain duplicities is to use the Connected Projects feature, which is available with the Professional plan. Connected Projects can help you by translating identical keys across multiple projects. This feature is great for a portfolio of projects sharing duplicate keys or Android and iOS versions of the same app. When enabled, Localazy distributes existing translations between connected projects and automatically decides whether the translation can be used right away or needs to go through review first.

For a robust duplicity management that can work with duplicities inside one project and across multiple projects as well, we recommend the Duplicity Linking feature, available with the Business plan. With duplicity linking, you can define one key as the source for all other keys with the same or similar content. The other keys are then marked as hidden and get their translation from the linked key.

Last updated: 26/02/2025

You can upload existing translations to your source files in Localazy File Management or follow the guide to uploading existing translations via the CLI.

In file management, you won’t see multiple versions of the same files in various languages.

You can imagine each Localazy file as a stack of its localized versions - with the source language on the bottom and all of the translated versions on top of it. So when you want to add a new language file, you update the stack.

If you want to upload translations in another language to Localazy, use the Upload existing translations option.

Last updated: 26/02/2025

Yes, absolutely. You can have multiple files in different folders uploaded to the same project.

You can include files by their exact path or by using standard path wildcards ? (single character), * (anything except path separator), ** (anything including path separators).

You can control files you want to upload with exclusion rules and conditions.

Example:

"upload": {
    "type": "json",
    "files": "modules/**/en.json"
  }
 
}

The above configuration will scan for files named en.json in all subfolders of the modules folder.

Last updated: 30/10/2025

The configuration process centers around the localazy.json file in your project root.

An example configuration includes:

{
    "writeKey": "your-write-key",
    "readKey": "your-read-key",
    "upload": {
        "type": "json",
        "files": {
            "pattern": "src/**/locales/*.json",
            "path": "${path}",
            "file": "${file}"
        }
    },
    "download": {
        "files": "src/locales/${lang}/${file}"
    }
}

The configuration supports variables, conditions, transformations, and format-specific features. You can also include group definitions for organizing different sets of files and rules for handling special cases.

Last updated: 26/02/2025

There are two main approaches to structuring translations in a front-end project:

Centralized Approach #️⃣

All translations are stored in one location:

my-app/
└── src/
    └── assets/
        └── locale/
            ├── en.json
            └── es.json

Pros:

  • Simple to set up
  • Easy to find all translations in one place

Cons:

  • Can become unwieldy in larger applications
  • All translations load at once (potentially impacting performance)

Component-Based Approach #️⃣

Translations are distributed alongside their components:

my-app/
└── src/
    └── modules/
        ├── feature-a/
        │   └── locale/
        │       ├── en.json
        │       └── es.json
        └── feature-b/
            └── locale/
                ├── en.json
                └── es.json

Pros:

  • Better organization in large applications
  • Works well with lazy loading
  • Teams can own their translations

Cons:

  • More complex setup
  • Requires additional configuration

For most applications, especially as they grow, the component-based approach offers better maintainability and scalability. However, for smaller applications, the centralized approach might be simpler to start with.

Localazy shows you the path to the original file, so you know what module you are translating.

Choose based on your project size and team structure, with the understanding that you can migrate between approaches as your needs evolve.

Last updated: 26/02/2025
Try the Vue.js integration with your own content!

Automate your localization with Localazy today!

Sign up now