jshmrtn/vue3-gettext

Render html with functions

tcitworld opened this issue · 3 comments

tcitworld commented

Since directives are now depreciated in 2.0.0-beta, what's the method to perform interpolation with HTML using functions?

Should there be a render-html option passed to the functions?

lzurbriggen commented

@tcitworld Unfortunately passing a render-html option will not work because the template compiler does not interpolate html, so this doesn't work: <span>{{ "<b>Demo</b>" }}</span>.

You will have to use v-html:

<span v-html="$gettext('<b>Demo</b>')"></span>

The XSS/security concerns of v-html don't apply if the translations are static, which they usually are. From the vue docs:

Only use HTML interpolation on trusted content and never on user-provided content.

tcitworld commented

Sorry, I should have been more explicit. My issue is when I use parameters to hide the complexity of the markup in the translation files, or want some attribute to be dynamic, something like this:

<h3 v-html="$ngettext(
            'Search for your XXX on %{tagStart}one website%{tagEnd} indexed by %{indexName}!',
            'Search for your XXX on %{tagStart}%{websitesCount} websites{%tagEnd%} indexed by %{indexName}!',
            websitesCount,
            { tagStart, tagEnd, indexName, websitesCount }
          )" />

Where

const tagStart = `<a class="underline" href="${indexedWebsitesUrl}" target="_blank">`

The parameters are escaped.

lzurbriggen commented

@tcitworld Added a disableHtmlEscaping parameter to the functions in v2.1.0

  • ❤️1