CommunityBlogUser docsSupport
Guides
Login

Vue3

Localize Vue apps with Transifex Native

Suggest Edits

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.

Updated about 2 years ago