Vue-i18n: Default value

[itveev]

Hello. Please, look at example code:

var locale = {
  en1:{
    msg1:"Test1",
    msg2:"Test2"
  },
  en2:{
    msg1:"Test1",
  }
}

Now, If I try to use $t('msg1') when lang is set to "en2" I'll see on screen "Test1". But if I try to use $t('msg2') I'll see "msg2". How can I set default lang, or what should I do, If I want to return default lang value, when the value is absent in current lang?

[guillaumevincent]

maybe the api could be more friendly like :

$t('msg2');
$t('msg2', 'default value');

it's more declarative, can be extracted automatically, and always display a value, even if an error occurred.

Love the api in the v2 of Intl in FormatJS by yahoo

https://github.com/yahoo/react-intl/issues/162

[nils-werner]

Don't other implementations usually work like

$t('This is the original message in the source code')

and translators then define

var locale = {
  de: {
    "This is the original message in the source code": "Dies ist die Original-Nachricht im Quelltext"
  }
}

If a translation cannot be found the original message will then be displayed instead, making it the fallback value.

[guillaumevincent]

@nils-werner I think an id is simpler

because of HTML formatting

 {{{ $t('Here an <a href="http://example.org/">example</a>') }}}

var locale = {
  de: {
    'Here an <a href="http://example.org/">example</a>' :  'hier ein <a href="http://example.org/">beispiel</a>'
  }
}

I prefer

 {{{ $t('example', 'Here an <a href="http://example.org/">example</a>') }}}

var locale = {
  de: {
    'example' :  'hier ein <a href="http://example.org/">beispiel</a>'
  }
}

because of the structure of the locale file

locale file become big, and I like to regroup translations per component

$t('component.element')

example

{{ $t('LoginBar.Sign_up', 'Sign up') }}

var locale = {
  de: {
    LoginBar : {
        Sign_up: 'Anmelden'
    }
  },
  en: {
    LoginBar : {
        Sign_up: 'Sign up'
    }
  }
}

[VegardSkui]

I think this should be included as a fallback language feature, which would be extremely useful for larger apps. For example we have an app and have coded every component with english translations, and are going to translate them into other languages bit by bit. It would be very useful to show the user the english translation in the meantime, instead of an ugly translation key like settings.email.

[mochetts]

Hi @VegardSkui @guillaumevincent & @LuckyBlade.

I don't know if you already solved this, but there's a fallbackLang property as part of this package that can be set to the Vue.config object to fallback to a specific language.

So whenever bootstrapping your application besides setting the Vue.config.lang, also set Vue.config.fallbackLang.

e.g.: Vue.config.fallbackLang = 'en1'

That would solve your needs.

[do-web]

Is this now possible $t('key', 'default value'); ?

[chovy]

Vue.config.fallbackLang = 'en' doesn't seem to do anything. If I switch from en to ru I get the key instead of english.