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: