A Vue component that simplifies the way text is translated: by translating it inline.

From my observation throughout the years, I have noticed that in most (or all) translation systems, translated strings are looked up from an array or object which has to be maintained separately from the markup. While working on translating a page, one often has to open a split view in the editor to find the corresponding string to look up in the current portion of the markup. As a result, it becomes a little bit confusing for the person writing content (and markup) as they would need to keep things in sync and remember which lookup keys or symbols go into which portions of the page.

So I wondered, what if there was a way to put the translations inline so that you can have the translated content and the original content placed side by side in the page's markup. This is where vue-simple-inline-translation comes in to the rescue.

With npm:

npm install @alidrus/vue-simple-inline-translation

With yarn:

yarn add @alidrus/vue-simple-inline-translation

The following is a simple example:

<template>
    <h1>
        <translate :current-language="current" language="en">Welcome</translate>
        <translate :current-language="current" language="ms">Selamat Datang</translate>
        <translate :current-language="current" language="tl">Maligayang Pagdating</translate>
    </h1>
</template>

<script>
import { VueSimpleInlineTranslation } from '@alidrus/vue-simple-inline-translation';

export default {
    components: {
        translate: VueSimpleInlineTranslation
    },
    data() {
        return {
            current: 'ms'
        };
    }
}
</script>

Output (in HTML markup):

<h1>Selamat Datang</h1>

When the translation text contains HTML markup, it will automatically be enclosed within a <span> block by default. However, you can change the enclosing tag using the enclosing-tag attribute. For example, the following two translation blocks

<template>
    <p>
        <translate :current-language="current" language="en">
            To <b>boldly</b> go where no translation has gone before.
        </translate>
    </p>

    <translate enclosing-tag="p" :current-language="current" language="en">
        <span>To <b>boldly</b> go where no translation has gone before.</span>
    </translate>
</template>

would produce the same HTML markup:

<p><span>To <b>boldly</b> go where no translation has gone before.</span></p>

For a more detailed example, check App.vue in the example/ folder.

Not using v-bind (or the : shorthand) to set current-language, force-tag, tag-class, tag-style and tag-attributes properties.

For example:

<translate … force-tag="true" … >

will set the force-tag prop to the string value "true" instead of boolean value true and this will produce an error when the prop fails to validate.

Using an array for tag-class, tag-style or tag-attributes instead of an object.

For example:

<translate … v-bind:tag-class="[ 'has-text-bold', 'is-active' ]" … >

will produce an error when the prop fails to validate.