Usage of @-symbol does not work

[christophstockinger]

vue & vue-i18n version

• vue: 3.0.0
• vue-i18n: 9.0.0-beta.2

Steps to reproduce

I have an e-mail address in a translation instruction that contains the @ sign.

My drawing instruction:

email: 'abc@xzy.de'

The call:

<p>{{ t('email') }}</p>

What is Expected?

I expect it to be translated 1 to 1.

What is actually happening?

Error on the console is thrown. But Webpack can compile it. So the error will happen at runtime.

[christophstockinger]

Found this error, which is related to my error #79

[kazupon]

@ is special character for vue-i18n-next (v9.0.0 later).
That character is used as linked locale messages (e.g. @:message)

As the new message format feature, Literal interpolation is supported since vue-i18n-next.
You can use it to output resolved string of email addresses by put @ as literal.

email: "abc{'@'}xzy.de"

[kazupon]

You can see the example: https://github.com/intlify/vue-i18n-next/blob/master/examples/composable/formatting/literal.html

[AniaKru95]

Is it possible to handle this exception?
I use symbol @, example: abc@example.pl and in console I saw only: SyntaxError: 10
I spent a lot of time to find this solution.
"vue": "^3.2.37"
"vue-i18n": "^9.2.2"

[andreas-it-dev]

also struggling to let user know they need to add an @ symbol.. workaround is "email has to contain an 'at' symbol" but thats not really helping the DAUs

[nicooprat]

I may have found a workaround using messageResolver: #531 (comment)