---
title: "How to convert vue-i18n from single file components to JSON"
description: "In this tutorial shows you how you can convert your vue-i18n project from using translations in vue files (single file components, sfc) to using JSON files."
canonical: "https://www.codeandweb.com/babeledit/tutorials/how-to-convert-vue-i18n-from-sfc-to-json-files"
date: "2023-11-08T00:00:00.000Z"
modified: "2023-11-08T00:00:00.000Z"
source: "html"
---

# How to convert vue-i18n from single file components to JSON

Andreas Löw

[babeledit](https://www.codeandweb.com/babeledit/tutorials.md),  [tutorial](https://www.codeandweb.com/tags/tutorial),  [vuejs](https://www.codeandweb.com/tutorials/vuejs.md),  [vue-i18n](https://www.codeandweb.com/tutorials/vue-i18n.md)

![How to convert vue-i18n from single file components to JSON](https://www.codeandweb.com/static/f88752ecc8bfce9c00872bd3caca9a7c/a6312/how-to-convert-vue-i18n-from-sfc-to-json.png)

## Introduction

In this guide, you'll learn a streamlined process to transition your Vue.js internationalization from `<i18n>` blocks within single file components (SFCs) to external JSON files. For context on why this is beneficial, [here's an insightful article](https://www.codeandweb.com/babeledit/tutorials/why-using-i18n-sections-in-vue-single-component-files-is-a-bad-idea.md).

I assume that you have a basic understanding of Vue.js and its file structure.

## Download BabelEdit 3.0.1

You can even use a trial version of BabelEdit to do this - no license required. Ensure you have BabelEdit 3.0.1, as newer versions will not support the vue-sfc format required for this transition.

[Download BabelEdit 3.0.1](https://www.codeandweb.com/babeledit/download.md)

> **Warning:** You need **BabelEdit 3.0.1** to do this. Newer versions do not work for this procedure!

## Import your project into BabelEdit

Drag and drop your project's root folder into BabelEdit. The application should automatically detect the project type. If prompted, select **vue-i18n (vue files)**.

  ![Select Project Type vue-i18n (vue files)](https://www.codeandweb.com/static/f8913e1be217658447fe616e737030a0/283d3/select-vue-i18n-project.png)

Confirm your project's languages when asked. BabelEdit usually auto-populates this data correctly.

  ![Choose the languages for your vue-i18n project](https://www.codeandweb.com/static/edcdfd8e7aa2be7a23464cb73a1a316e/283d3/choose-languages-for-your-vue-i18n-project.png)

Click **Ok**.

You should see something similar to the screenshot below: Your Vue.js components appear top-level in the tree on the left side. Below them, you see the translations.

  ![The configured vue-i18n project with single file components](https://www.codeandweb.com/static/75d08f5c46c08e5756affdb95680164b/283d3/configured-vue-i18n-project.png)

Keep your project open in BabelEdit.

## Create a new Vue.js project in BabelEdit

From the BabelEdit menu, select **New project**. Choose **vue-i18n (json files)** for the project type and place your JSON files in `src/locales`.

For each language in your original project, add the corresponding JSON file. If you already have JSON files for some languages, select **Existing file...**; otherwise, choose **New...** and define the file name and language.

  ![Select the language for your JSON translation files for your vue-i18n project](https://www.codeandweb.com/static/e4820ec2390b519e587e1c48df32f4fe/283d3/select-the-language-for-your-json-files.png)

Set a _Primary Language_ for your project to enable machine translation and other features in BabelEdit.

## Transfer the translation from the vue-sfc project to the Vue.json project

Depending on whether your translation IDs are unique or duplicated across components, you'll either copy all translations under each `.vue` file or the entire tree structure, respectively.

### Most translation IDs are unique

If your translation IDs are unique, you can simply select all items below the _.vue_ file node in the tree on the left side of BabelEdit.

E.g.

*   📄 src/components/main.vue
    *   💬 title
    *   💬 text
*   📄 src/components/about.vue
    *   💬 another-title
    *   💬 another-text

Here it's the easiest way to just copy `title`, `text`, `another-title` and `another-text`.

### Many translation IDs are used in different components

If your translation IDs are not unique, you can either rename the IDs to make them unique or copy the whole tree including the file nodes. They'll show up in the target project, too.

E.g. if your structure looks like this:

*   📄 src/components/main.vue
    *   💬 title
    *   💬 text
*   📄 src/components/about.vue
    *   💬 title
    *   💬 text

And you copy it over to the JSON project, you'll see the same items. It's important that you now replace `src/components/main.vue` with `main` and `src/components/about.vue` with `about` in the JSON project afterwards.

You'll also have to change the parts of your code where you reference the IDs from `title` to `main.title` in _main.vue_ and `title` to `about.title` in the _about.vue_.

### Copying the nodes

Use `CTRL`+`C` (Windows) or `⌘`+`C` (Mac) to copy the translations.

Switch to the Vue.json project, click in the left panel with the tree view and press `CTRL`+`V` (Windows) or `⌘`+`V` (Mac) to paste the translations.

If you don't want to use the shortcuts, use the **context menu** (Right mouse button, Copy and Paste).

  ![Copy translations from vue-sfc to your Vue.json project](https://www.codeandweb.com/static/be5685c83811bedcffd566f84d5231fd/283d3/copy-translations-from-vue-i18n-sfc-to-json.png)

## Cleanup your new project

You might see nodes in the translation tree, that have a number in ´()´ — this happens when identical parts of a path are found. BabelEdit does not interleave the translation IDs.

You can easily move nodes or subtrees using copy and paste or the **Move to...** command in the tree's context menu.

Finally, save the new project. It'll ask you to save a .babel file - that's the project configuration for BabelEdit. After it's saved, it'll also store your _.json_ files in the location specified during setup.

## Remove `<i18n>` sections from your components

Edit your `.vue` files to remove the `<i18n>` sections manually.

## Load the _.json_ files in your project

Modify the `VueI18n` initialization in your main.js file to load the JSON files from the `./locales` directory. The example code below should give you an idea how to do that.

```js
Vue.use(VueI18n)

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})
```

## Conclusion

Migrating your Vue.js project to use JSON files for internationalization simplifies translation management. Follow this guide to make the transition smoothly.

In the end, the effort is worth it, as the use of JSON files significantly simplifies the handling of translations in the long run.

If you are still in doubt: Read [Why using i18n sections in Vue.js single file components is a bad idea](https://www.codeandweb.com/babeledit/tutorials/why-using-i18n-sections-in-vue-single-component-files-is-a-bad-idea.md).

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "How to convert vue-i18n from single file components to JSON",
  "author": [
    {
      "@type": "Person",
      "name": "Andreas Löw"
    }
  ],
  "dateModified": "2023-11-08T00:00:00.000Z",
  "image": "/static/f88752ecc8bfce9c00872bd3caca9a7c/a6312/how-to-convert-vue-i18n-from-sfc-to-json.png"
}
```

```json
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to convert vue-i18n from single file components to JSON",
  "image": {
    "@type": "ImageObject",
    "url": "https://www.codeandweb.com/static/f88752ecc8bfce9c00872bd3caca9a7c/f3583/how-to-convert-vue-i18n-from-sfc-to-json.png",
    "height": "600 px",
    "width": "1200 px"
  },
  "step": [
    {
      "@type": "HowToStep",
      "url": "https://www.codeandweb.com/babeledit/tutorials/how-to-convert-vue-i18n-from-sfc-to-json-files#download-babeledit-301",
      "text": "Download BabelEdi 3.0.1"
    },
    {
      "@type": "HowToStep",
      "url": "https://www.codeandweb.com/babeledit/tutorials/how-to-convert-vue-i18n-from-sfc-to-json-files#import-your-project-into-babeledit",
      "text": "Import your project into BabelEdit"
    },
    {
      "@type": "HowToStep",
      "url": "https://www.codeandweb.com/babeledit/tutorials/how-to-convert-vue-i18n-from-sfc-to-json-files#create-a-new-vuejs-project-in-babeledit",
      "text": "Create a new Vue.js project"
    },
    {
      "@type": "HowToStep",
      "url": "https://www.codeandweb.com/babeledit/tutorials/how-to-convert-vue-i18n-from-sfc-to-json-files#transfer-the-translation-from-the-vue-sfc-project-to-the-vuejson-project",
      "text": "Transfer the translation from the vue-sfc project to the vue-json project"
    },
    {
      "@type": "HowToStep",
      "url": "https://www.codeandweb.com/babeledit/tutorials/how-to-convert-vue-i18n-from-sfc-to-json-files#cleanup-your-new-project",
      "text": "Cleanup your new project"
    },
    {
      "@type": "HowToStep",
      "url": "https://www.codeandweb.com/babeledit/tutorials/how-to-convert-vue-i18n-from-sfc-to-json-files#remove-i18n-sections-from-your-components",
      "text": "Remove the <i18n> sections from your components"
    },
    {
      "@type": "HowToStep",
      "url": "https://www.codeandweb.com/babeledit/tutorials/how-to-convert-vue-i18n-from-sfc-to-json-files#load-the-json-files-in-your-project",
      "text": "Load the .json files in your project"
    }
  ],
  "totalTime": "PT15M"
}
```