When your Vue app needs internalization, you'll probably come across i18n. It took me a while to get a proper grasp on how to display messages in different scenarios (especially #5), so I'm laying out a quick easy-digest summary here.
1. Basic interpolation
With the interpolation curly brackets you can render any content that can be placed directly in your template HTML.
<p>{{$t('introText')}}</p>
2. Binding the value
Useful for input placeholders or labels.
<v-text-field :label="$t('form.firstName')"></v-text-field>
3. Within a function
Note that within the Vue instance it would be necessary to use this
keyword
btnLabel(){
return this.$t('buttons.save')
}
4. Using v-t
directive
With v-t
directive you may specify the path of the translation string in the data object and then easily render it in the template.
data: () => ({
path: "buttons.add"
}),
<v-btn v-t="path"></v-btn>
NB: This directive is not reactive, therefore the content needs to be manually reloaded when the locale changes.
5. Using v-text
directive
To solve the reactivity problem, you may use v-text
directive instead.
data: () => ({
path: "buttons.add"
}),
<v-btn v-text="$t(path)"></v-btn>
Hope this comes in handy for our translation wizards! Give me a shout if there's a technique I missed 😜
Top comments (5)
There is the v-t directive to prevent re-execution of the translation too.
Oh, very cool! Honestly was not even aware of that. Will replace the 4th point with that, since it's much cleaner than v-text :)
Though I just realised it's not reactive (if you change locale, it won't refresh the messages. v-text does though, without having to refresh the page. Do you know if there is a way to achieve reactivity with v-t?
You will need to re-render the component.
This dirty workarround can be done in some ways listed here:
michaelnthiessen.com/force-re-render/
When I needed to, I used this:
and executed the forceRerender on watch for language change.
How to use it in v-model directly
For example if you have a price coming from the backend which is mapped to v-model directly
How can U use localisation on it directly?
Thanks