@transifex/vue2
v7.1.3
Published
Vue i18n framework using Transifex Native
Downloads
367
Maintainers
Readme
Transifex Native SDK: Vue i18n
Vue2 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.
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/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');
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/vue2';
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.