---
title: "Edit Vue.js translation files"
description: "How to use BabelEdit with Vue.js for translating your applications using vue-i18n with JSON files and properties files."
canonical: "https://www.codeandweb.com/babeledit/documentation/frameworks/vue-js"
product: "babeledit"
source: "html"
---

# Vue.js

BabelEdit support translations using vue-i18n in separate .json files for each language.

See our [vue tutorial](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n.md) for more information.

## vue-i18n (.json)

BabelEdit supports one language per .json file with [nested JSON objects](https://www.codeandweb.com/babeledit/documentation/frameworks/json.md#namespaced-json) You can either use require/import to add these files to your project or load them at runtime.

## vue-i18n (.vue)

We removed the support for _.vue_ files with newer releases because nobody was really using this format. Using the translations this way also comes with big disadvant disadvantages. See [Why using i18n sections in vue.js single files 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)

## Vue.js Single File Components (.vue) - deprecated

BabelEdit supports single file components in .vue files with vue-i18n. The translations for all languages have to be enclosed in a `<i18n></i18n>` section. The current format supported is JSON. The top level element is always the language-code (e.g. `en`) the child keys build the translation id.

We'll remove the support for these vue.js single file components with the next BabelEdit release. See our article [Why using i18n sections in vue.js single files components is bad](https://www.codeandweb.com/babeledit/tutorials/why-using-i18n-sections-in-vue-single-component-files-is-a-bad-idea.md) for details.

Removing support for the .vue files does not seem to make a big difference since only 0.5% of our user base use these files. Almost all Vue.js users keep their translations in .json files anyways.

```html
<template>
    <p>{{ $t('hello') }}</p>
</template>

<script>
    export default {
        name: 'HelloI18n'
    }
</script>

<i18n>
    {
        "en": {
            "hello": "Hello i18n in SFC!"
        },
        "de: {
            "hello: "Hallo Welt!
        }
    }
</i18n>
```

If you want to add a file to BabelEdit it requires at least an empty `<i18n></i18n>` section to show up in the project's file list.

## In this section

- [Installation](https://www.codeandweb.com/babeledit/documentation.md)
- [Framework selection](https://www.codeandweb.com/babeledit/documentation/framework-selection.md)
- [Main screen](https://www.codeandweb.com/babeledit/documentation/main-screen.md)
- [Project configuration](https://www.codeandweb.com/babeledit/documentation/project-configuration.md)
- [Configure languages](https://www.codeandweb.com/babeledit/documentation/configure-languages.md)
- [Adding translations](https://www.codeandweb.com/babeledit/documentation/adding-translations.md)
- [Search & filters](https://www.codeandweb.com/babeledit/documentation/search-and-filters.md)
- [Editing tools](https://www.codeandweb.com/babeledit/documentation/editing-tools.md)
- [Import & export](https://www.codeandweb.com/babeledit/documentation/import-export.md)
- [.NET (.resx)](https://www.codeandweb.com/babeledit/documentation/frameworks/dotnet.md)
- [Angular](https://www.codeandweb.com/babeledit/documentation/frameworks/angular.md)
- [Ember.js](https://www.codeandweb.com/babeledit/documentation/frameworks/ember-js.md)
- [Flutter (.arb)](https://www.codeandweb.com/babeledit/documentation/frameworks/flutter.md)
- [Gettext (.po, .pot)](https://www.codeandweb.com/babeledit/documentation/frameworks/po-files.md)
- [i18next (json)](https://www.codeandweb.com/babeledit/documentation/frameworks/i18next.md)
- [Java](https://www.codeandweb.com/babeledit/documentation/frameworks/java.md)
- [JSON](https://www.codeandweb.com/babeledit/documentation/frameworks/json.md)
- [Laravel (php/json)](https://www.codeandweb.com/babeledit/documentation/frameworks/laravel.md)
- [React](https://www.codeandweb.com/babeledit/documentation/frameworks/react.md)
- [Ruby On Rails](https://www.codeandweb.com/babeledit/documentation/frameworks/ruby-on-rails.md)
- [Svelte](https://www.codeandweb.com/babeledit/documentation/frameworks/svelte.md)
- [YAML](https://www.codeandweb.com/babeledit/documentation/frameworks/yaml.md)
- [Overview](https://www.codeandweb.com/babeledit/documentation/features.md)
- [Machine Translation](https://www.codeandweb.com/babeledit/documentation/machine-translation.md)
- [ConsistencyAI](https://www.codeandweb.com/babeledit/documentation/consistency-ai.md)
- [Spell Checker](https://www.codeandweb.com/babeledit/documentation/spellchecker.md)
- [Similar Phrases](https://www.codeandweb.com/babeledit/documentation/translation-memory.md)