Vue translation containing HTML

💻 Development app dev
1

I’m trying to translate my app for NextCloud 20+. I’m following this tutorial:
https://docs.nextcloud.com/server/latest/developer_manual/basics/front-end/l10n.html
but it’s obviously deprecated.

I tried to put the t() directly in the vue template:

<template>
    {{ t('myapp', 'Test <em>emphasis</em>') }}
</template>

But it simply render the whole {{ ... }} thing as text. The t function didn’t even attempt to translate the string.
I tried with triple brackets {{{ ... }}} but that doesn’t work. I believe that’s a Vue 1.0 feature.

Then I tried to create a method in the computed section to render the string outside of the vue:

export default {
    computed: {
        myString() {
            return t('myapp', 'Test <em>emphasis</em>')
        }
    }
}

Then I displayed the string in my template:

<template>
    {{ myString }}
</template>

but the HTML gets encoded:

Test &lt;em&gt;emphasis&lt;/em&gt;

I also tried with parameters like in the documentation:

t('myapp', 'Test {emstart}emphasis{emend}', {emstart: '<em>', emend: '</em>'})

but the html get double encoded:

Test &amp;lt;em&amp;gt;emphasis&amp;lt;/em&amp;gt;

I assume once by the t function and once again by Vue.js. In other words, the documentation is doubly wrong. Triple if you consider that they didn’t mention that the t function can’t be put in the template when it contains HTML.

Then I tried to use this in my template:

<div v-html="myString" />

with the following computed method:

myString() {
    return t('myapp', 'Test <em>emphasis</em>')
}

That works, but that feels overly convoluted to be the right way. Plus ESLint gives the following warning:

ESLint: 'v-html' directive can lead to XSS attack.(vue/no-v-html)

Obviously, I could chop the string in 2 parts and translate both parts separately, but that would be pretty much untranslatable as stated in the documentation. At least I agree with that point in the doc.

What is the proper way to translate a string containing HTML in NextCloud 20+?

2

Hello @gaellafond ,

such dev questions are answered quickly at developer chat at https://cloud.nextcloud.com/call/xs25tz5y

3

Well, yet if someone else in the future has a similar question they will have to ask about the solution another time.

@gaellafond could you please post your solution here once you found it? You’ll help other app devs a lot!

As far as I know we escape all translation strings. You have to insert some placeholders in the original text, which translators hopefully don’t drop and then you string replace the placeholders in the translated text with your HTML markup.

1 Like