VueI18n check if translation exists

Question

Is there a way to check if translation exist?

<p v-if="$t('some_key')">{{ $t('some_key') }}</p>

In this case if there is no translation it will print 'some_key'. Maybe there is a way to configure global fallback?

`$te('some_key')` https://kazupon.github.io/vue-i18n/api/#vue-injected-methods — Eric Guan, Jun 26 '20 at 18:54
Great! Thank you @Eric Guan! Put this answer so I could vote him up. — Dvdgld, Jun 26 '20 at 19:06

score 50 · Accepted Answer · answered Jun 26 '20 at 20:06

50

You can use the $te method.

Example usage:

<p v-if="$te('some_key')">{{ $t('some_key') }}</p>

https://kazupon.github.io/vue-i18n/api/#vue-injected-methods

answered Jun 26 '20 at 20:06

Eric Guan

15,474
8
50
61

5

In vue-i18n 9.x, this is only supported with the legacy API. Is there an equivalent for the composition API? – Etienne de Martel Aug 21 '22 at 04:32
For vue-i18n 9.x there is a `te` method returned from `useI18n()` `const { t, te } = useI18n();` – PWie Aug 17 '23 at 14:02

score 6 · Answer 2 · answered Aug 22 '22 at 09:35

6

<template>
    <p v-if="te('some_key')">{{ t('some_key') }}</p>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
...
const { t, te } = useI18n();
</script>

answered Aug 22 '22 at 09:35

user19819191

61
1
1

1

This seems to just be a part of the accepted answer. Can you explain in your answer what more helpful information this gives to answer the question. It is very rare that a snipped of code without explanation can be regarded as a good answer. – Dragonthoughts Aug 22 '22 at 13:10
Because you have wrapped the existing [accepted answer](https://stackoverflow.com/a/62602121/7758804) in some unrelated code, I can only assume it was posted as a "thank you" or "confirmation". Please don't add "thank you", or "confirmation" answers. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation), you will be able to [vote up questions and answers](https://stackoverflow.com/help/privileges/vote-up) that you found helpful. [From Review](https://stackoverflow.com/a/73442999/7758804) – Trenton McKinney Aug 22 '22 at 17:27

score 1 · Answer 3 · answered Aug 22 '22 at 11:49

I was interested in this as well and went to look up the documentation. The options above are good and might be best usable as the following can become quite messy when you have large translation files, but it comes from i18n self and might work for some as well:

https://www.i18next.com/principles/fallback

There is a line in there that you can specify the key as the actual sentence. So when that key is not available the key becomes the text:

i18next.t('No one says a key can not be the fallback.')

This 'No one says a key can not be the fallback.' is now the key in your translation file, but if it does not exist it will show this english version.

Again I would not do this if you have huge translation files as short keys keep it better readable and if someone is using it like this.. don't do full texts as keys.. ow what a mess. should I even post this? :p

oh, interesting option, it's good to know, thank you. But yeah, it's should be a plan B :) — Dvdgld, Aug 28 '23 at 05:52

VueI18n check if translation exists

3 Answers3