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
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
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
$t template function or this.t alias for scriptsMakes 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
LanguagePicker componentRenders 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 over 2 years ago