Integrate Vue.js

with Localazy within minutes.

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.

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.

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.

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.

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.

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.

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.

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.

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.