Vue.js

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

See our vue tutorial for more information.

vue-i18n (.json)

BabelEdit supports one language per .json file with nested JSON objects 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

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 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.

<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.