Escaping a pipe in a vue-i18n translation

Question

We need to have a translation in vue-i18n where the translated string have to contain a pipe character ( | ).

But in vue-i18n translation files, the pipe is used as delimiter for pluralization. We tried several ways to escape it (single or double backslash, etc.) but nothing worked…

I couldn’t find anything talking about that in vue-18n documentation.

I didn’t found issues talking about that in the vue-i18n github repository.

Has anybody already faced it and found a workaround?

Answer 1

I understand the problematic. You can solve your problem either by using $t instead of $tc, since $t method will not do a pluralization, or by putting pipe unicode: \u007C instead of | in your localization string. Hope that any of these solutions will work for you. Cheers!

Answer 2

Correct way to escape pipe & other special characters would be to use literal interpolation syntax.

"User profile {'|'} AppName"

https://vue-i18n.intlify.dev/guide/essentials/syntax.html#literal-interpolation