2
\$\begingroup\$

After following up this question, I'm thinking if there's a better/shorter way to write this text element that has part with different style, while allowing localizations:

<p>
    <span class="has-text-grey">{{ $store.releaseList != null ? $store.releaseList.length : 0 }}</span>
    <span> versions released</span>
</p>

With vue-i18n:

<p v-html="$t('downloads.releases.table.versions-total')
    .replace('{0}', '<span class=has-text-grey>{1}</span>')
    .replace('{1}', $store.releaseList != null ? $store.releaseList.length : 0)">
</p>

The localizable text would be {0} versions released.

I could set the localizable text to <span class=has-text-grey>{0}</span> versions released, but that would make the life of the translators (usually people without knowledge about HTML) a bit more difficult.

Is there any better built in way to add support for localizations in a multi-styled text?

\$\endgroup\$

0

Reset to default

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.