Internazionalization in VUE i18n for long text paragraph

Question

What's the best approach in using VUE i18n for a long text paragraph? I know that I can use backticks (``) and even preserve carriage return but is this the way to go? Or is better to conditionally load different JSON files according to the locale settings?

score 1 · Accepted Answer · answered Jan 05 '21 at 08:56

1

You can use the following in your template to have some content i18n'ed: {{ $t('deeply.nested.key') }} and reference a JSON with a super long value. If your block do not require anything more than just pure text, it'll be fine.

If you need to add some styling, a new line, some conditional rendering or anything more than just text, I'd recommend using component interpolation. It will prevent having ugly inline html/css in your JSON.

On a totally other topic, indeed, lazy loading the locales is a good idea too.

Here is a little snippet of code on how to achieve it, more details can be found on the dedicated page.

// If the language hasn't been loaded yet
return import(/* webpackChunkName: "lang-[request]" */ `@/i18n/messages/${lang}.js`).then(
  messages => {
    i18n.setLocaleMessage(lang, messages.default)
    loadedLanguages.push(lang)
    return setI18nLanguage(lang)
  }
)

answered Jan 05 '21 at 08:56

kissu

40,416
14
65
133

How do you have the long string with line breaks? Is that a eslint thing or vscode package? – A.com Mar 28 '22 at 15:53
@A.com it's a VScode setting, like line wrap. Prettier can do that too btw (line width). – kissu Mar 28 '22 at 17:11
1

Thanks! found it under VScode "view" dropdown – A.com Mar 29 '22 at 18:32
@A.com could also use the palette (`ctrl + shift + p`). – kissu Mar 29 '22 at 18:38

Internazionalization in VUE i18n for long text paragraph

1 Answers1