Vue i18n Pitfall Guide: How to Fix the "Invalid Linked Format" Compilation Error Caused by Email Addresses?

## The Scenario While developing a Vue.js project, we utilized the `vue-i18n` library for internationalization. After starting the project, everything on the page seemed to function correctly, but the browser console was flooded with `Message compilation error: Invalid linked format` errors. After some investigation, the issue was traced back to a component displaying a user's email address. --- ## Reproducing the Error Let's look at the code that causes the problem. Suppose we have a language file at `locales/en/wiki.lib00.js`: ```javascript // locales/en/wiki.lib00.js export default { "user": { "name": "User", "email": "DP@wiki.lib00.com", // The source of the problem "profile": "Profile", "settings": "Account Settings", "logout": "Logout" }, } ``` In our component, `TopNav.vue`, we use it as follows: ```vue <template> <!-- ... --> <div class="user-email">{{ t('user.email') }}</div> <!-- ... --> </template> ``` This setup results in the following console errors: ```plaintext TopNav.vue:88 Message compilation error: Invalid linked format 1 | DP@wiki.lib00.com | ^ TopNav.vue:88 Message compilation error: Unexpected lexical analysis in token: 'wiki.lib00.com' 1 | DP@wiki.lib00.com | ^^^^^^^^^^^^^^^ ``` --- ## Root Cause Analysis The core of the issue lies in `vue-i18n`'s **Message Format Syntax**. Within this syntax, the `@` symbol is a special character used to initiate a **Linked Message**. When the `vue-i18n` compiler parses the string `"DP@wiki.lib00.com"`: 1. It encounters the `@` symbol. 2. It interprets the subsequent text, `wiki.lib00.com`, as a **linked key** and attempts to find a translation for this key. 3. Since `wiki.lib00.com` is not a valid translation key path, the parser fails and throws the `Invalid linked format` compilation error. The reason the page still appears "normal" is that `vue-i18n` often has a fallback mechanism, which is to display the original raw string upon compilation failure. However, this underlying error is unacceptable in a production environment. --- ## Solutions To resolve this, we need to explicitly tell the `vue-i18n` compiler that the `@` symbol is just a plain text character, not a trigger for its special syntax. Here are two recommended solutions. ### Method 1: Use Literal Interpolation (Highly Recommended) This is the cleanest and most robust method. By wrapping the special character in `{}`, you declare it as a literal value. **Modify the `locales/en/wiki.lib00.js` file:** ```javascript "user": { "name": "User", // Wrap the @ symbol with {'@'} to explicitly tell the compiler it's a plain character "email": "DP{'@'}wiki.lib00.com", "profile": "Profile", "settings": "Account Settings", "logout": "Logout" }, ``` ### Method 2: Use Single Quotes for Escaping You can wrap the entire string, or the part containing special characters, in single quotes `'`. The `vue-i18n` compiler will treat everything inside the single quotes as plain text. **Modify the `locales/en/wiki.lib00.js` file:** ```javascript "user": { "name": "User", // Wrap the entire string in single quotes "email": "'DP@wiki.lib00.com'", "profile": "Profile", "settings": "Account Settings", "logout": "Logout" }, ``` > **Note**: If your text itself contains a single quote, you need to escape it with two single quotes `''`. For example: `'It''s a message'`. --- ## Conclusion The `Invalid linked format` error in `vue-i18n` is a classic case of a special character conflicting with the library's built-in syntax. This can be easily resolved by escaping the character using either **literal interpolation `{'@'}`** or by **wrapping it in single quotes**. In our project, wiki.lib00.com, we recommend using literal interpolation as it's more explicit and readable, targeting only the specific character that needs escaping.