4

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?

desertnaut
  • 57,590
  • 26
  • 140
  • 166
stefsouron
  • 45
  • 2
  • 3
  • We'll try the escaped character. But we've always used $t, and never $tc, and in our webapp, $t does pluralization. Are we on an very aged version ? We are in 8.10.0 – stefsouron Oct 02 '20 at 06:49
  • Everything should work on version 8.10.0. What do you mean when you say: "In our webapp $t does pluralization."? If you have some custom method which then calls $t or $tc, maybe that is not the best approach, and the problem lies there. – liborkozak Oct 10 '20 at 15:43

2 Answers2

10

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

Tanel Tammik
  • 15,489
  • 3
  • 22
  • 31
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!

liborkozak
  • 474
  • 4
  • 4