Transifex

Transifex

  • Documentation
  • Javascript SDK
  • Localize Vue applications

Localize Vue applications

Outdated article

All developer documentation has moved to Transifex Developer Hub. Read this article here.

You can easily localize Vue components using the @transifex/vue2 library extension.

Installation

Install the extension library using: 

npm install @transifex/vue2 --save

Usage

Initiate the plugin in a Vue App

import Vue from 'vue';
import App from './App.vue';
import { tx } from '@transifex/native';
import { TransifexVue } from '@transifex/vue2';

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

Vue.use(TransifexVue);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Use the T component to mark strings for translation based on the example below.

<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 are:

  • _str [String] Source string
  • _context [String] String context, affects key generation
  • _key [String] Custom string key
  • _comment [String] Developer comment
  • _charlimit [Number] Character limit instruction for translators
  • _tags [String] Comma separated list of tags

Use $t template function or this.t alias for scripts

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').toUpperCase() },
    },
  }
</script>

Use the UT component to mark raw HTML strings for translation based on the example below.

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

Available optional props are:

  • _inline [Boolean] The _str string will be encapsulated in a <div> tag by default. Setting _inline prop will encapsulate translation in a <span> tag, so that in can be used inline, e.g. within a <p> tag.
  • All the options of the T component.

LanguagePicker component

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

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

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

Accepts properties:

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

If you want something different than a <select>, it should be easy to write your own language picker using useLanguages and useLocale: