Saturday, 20 April, 2019 UTC

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

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

Summary

@alidrus/vue-simple-inline-translation
A Vue component that simplifies the way text is translated: by translating it inline.
Motivation
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.
Installation
With npm:
npm install @alidrus/vue-simple-inline-translation
With yarn:
yarn add @alidrus/vue-simple-inline-translation
Usage Examples:
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.
Available props
Prop Type Default Description
current-language String Current language.
language String Language of the translated text.
enclosing-tag String span HTML tag used to enclose the translated text. By default, only applied when translation text contains HTML markup.
force-tag Boolean false Force enclosing tag to be used even when translation is plain text without markup.
tag-class Object {} CSS classes to apply to the enclosing tag. Same format as v-bind:class using an object.
tag-style Object {} CSS styles to apply to the enclosing tag. Same format as v-bind:style using an object.
tag-attributes Object {} The enclosing tag's HTML attributes (property-value pairs).

Common mistakes when setting prop values

no v-bind

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.

wrong prop type

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

... more @ vuejsexamples.com

vuejsexamples.com