Vue3

Localize Vue apps with Transifex Native

Vue3 plugin for localizing Vue application using Transifex Native. This library extends the functionality of Transifex Native JavaScript SDK.

Related packages:

Installation

Install the library and its dependencies using:

npm install @transifex/native @transifex/vue3 @transifex/cli --save

Usage

Initiate the plugin in a Vue App

import { createApp } from 'vue';
import App from './App.vue';
import { tx } from '@transifex/native';
import { TransifexVue } from '@transifex/vue3';

tx.init({
  token: '<token>',
});

const app = createApp(App);

app.use(TransifexVue);
app.mount('#app');

T Component

<template>
  <div>
    <T _str="Hello world" />
    <T _str="Hello {username}" :username="user" />
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        user: 'John'
      };
    },
  }
</script>

Available optional props:

PropTypeDescription
_contextStringString context, affects key generation
_keyStringCustom string key
_commentStringDeveloper comment
_charlimitNumberCharacter limit instruction for translators
_tagsStringComma separated list of tags

UT Component

<template>
  <div>
      <UT _str="Hello <b>{username}</b>" :username="user" />
      <p>
        <UT _str="Hello <b>{username}</b>" :username="user" _inline="true" />
      </p>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        user: 'John'
      };
    },
  }
</script>

UT has the same behaviour as T, but renders source string as HTML inside a
div tag.

Available optional props: All the options of T plus:

PropTypeDescription
_inlineBooleanWrap translation in span

$t template function or this.t alias for scripts

Makes the current component re-render when a language change is detected and
returns a t-function you can use to translate strings programmatically.

You will most likely prefer to use the T or UT components over this, unless
for some reason you want to have the translation output in a variable for
manipulation.

<template>
  <div>
    {{$t('Hello world').toLowerCase()}}
    {{hellofromscript}}
  </div>
</template>

<script>
  export default {
    name: 'App',
    computed: {
      hellofromscript: function() { return this.t('Hello world').toLowerCase() },
    },
  }
</script>

LanguagePicker component

Renders a <select> tag that displays supported languages and switches the
application's selected language on change.

<template>
  <div>
    <T _str="This is a translatable message" />
    <LanguagePicker />
  </div>
</template>

<script>
import { LanguagePicker } from '@transifex/vue3';
  export default {
    name: 'App',
    components: {
      LanguagePicker,
    }
  }
</script>

Accepts properties:

  • className: The CSS class that will be applied to the <select> tag.