@transifex/vue3

7.1.0 • Public • Published

Transifex Native is a full end-to-end, cloud-based localization stack for moderns apps.

Transifex Native SDK: Vue i18n

Vue3 component for localizing Vue application using Transifex Native.

Related packages:

Learn more about Transifex Native in the Transifex Developer Hub.

How it works

Step1: Create a Transifex Native project in Transifex.

Step2: Grab credentials.

Step3: Internationalize the code using the SDK.

Step4: Push source phrases using the @transifex/cli tool.

Step5: Translate the app using over-the-air updates.

No translation files required.

native

Upgrade to v2

If you are upgrading from the 1.x.x version, please read this migration guide, as there are breaking changes in place.

Install

Install the library and its dependencies using:

npm install @transifex/native @transifex/vue3 --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:

Prop Type Description
_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

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:

Prop Type Description
_inline Boolean Wrap 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.

License

Licensed under Apache License 2.0, see LICENSE file.

Package Sidebar

Install

npm i @transifex/vue3

Weekly Downloads

173

Version

7.1.0

License

Apache-2.0

Unpacked Size

9.98 kB

Total Files

3

Last publish

Collaborators

  • transifex