Skip to content
This repository has been archived by the owner on May 19, 2022. It is now read-only.

Is it possible to include components in translation string? #59

Open
Aareksio opened this issue Jan 26, 2019 · 0 comments
Open

Is it possible to include components in translation string? #59

Aareksio opened this issue Jan 26, 2019 · 0 comments
Labels

Comments

@Aareksio
Copy link

Aareksio commented Jan 26, 2019

Hey!

Objective

I'd like to let my translators include vue components in their strings, example:

Check out new items in {{url:shop|our shop}}

Such translation string would later be transformed using i18next post processor into vue template:

Check out new items in <router-link :to="{ name: 'shop' }">our shop</router-link>

And eventually rendered. This would be similar to i18next component, but allow more flexibility.

Why?

In this particular example it allows to keep link display text in the same translation string as the whole sentence, making it significantly easier to maintain, especially for languages in which a word takes different form depending on context.

Take the following sentences in English and Polish as an example, the word marked with astrix is meant to be transformed into display text of router-link:

// English
Visit our *store*
Check out new items in the *store*

// Polish
Odwiedź nasz *sklep*
Zobacz nowe przedmioty w *sklepie*

While in English the word is the same, in other languages we may need to adjust it's grammatical case.

Existing solution

The problem could be solved by i18next component and unique translation string for each display name (I don't think using context is sufficient, as it's language-specific), but this approach adds a lot of unnecessary complexity.

i18next allows for custom post processors, we can use it to create HTML string (eg. <a href="#"></a>) and use it in v-html. Such solution works as a workaround for simple components.

We can probably post process the i18n string into Vue template, then use Vue.compile to get the render function, but that comes with a cost of including full Vue build I'd like to avoid.

Abstracting the problem

General solution would be to utilize vue's dynamic <component>, example:

Codepen snippet: {vue:codepen-snippet|user=XXX,id=XXXXX}
// Renders to
Codepen snippet <component is="codepen-snippet" user="XXX" id="XXXXX"></component>

Actual question

Do you think such feature is possible to be implemented within the library?

If not, what's your opinion on extending i18next component capabilities to allow props in translation strings, eg. {{0:prop-name=1}}?

Edit: Updated wikipedia link so it points to grammatical case, not declination.
Edit 2: Redacted

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants