Search code examples
vue.jsyamlinternationalizationvue-i18n

How can I use special characters like @ in vue-i18n?

I am using vue-i18n for localizing my forms. I have an email field that has a placeholder which contains an example email address that includes an @ symbol.

emailPlaceholder: 'eg: [email protected]'

Despite the quotes around the string, I got the following error

[plugin:unplugin-vue-i18n] Invalid linked format (error code: 10) in en.yaml

1  |  eg: [email protected]
   |          ^

Why is vue-i18n giving me an error despite the string being in quotes?

Solution

  • The problem is that vue-i18n has a number of special characters that need to be escaped but YAML escaping methods like backslash will NOT work.

    Instead, use literal interpretation. This means using {} brackets to surround a string inside a string.

    emailPlaceholder: "{'eg: [email protected]'}"

    More about this can be found in this github issue.