What problem does this feature solve?

Description: I would like to propose an enhancement to Vue 3 that allows the usage of a valid syntax, {{}}, in Vue templates. Currently, this syntax is not recognized and causes a syntax error.

Background: In certain scenarios, it is necessary to include comments within template expressions to provide additional context or instructions. However, Vue 3 does not allow using HTML-style comments () within double curly braces ({{ }}) expressions.

Proposal: I suggest updating the Vue 3 compiler to support the usage of {{}} syntax without causing a syntax error. This enhancement would enable developers to include comments within template expressions, making the templates more expressive and self-documenting.

Current Behavior: When attempting to use {{}} syntax in Vue 3 templates, a syntax error is thrown, and the template fails to compile or run.

Expected Behavior: The Vue 3 compiler should recognize and ignore the HTML-style comments within double curly braces, allowing the usage of {{}} syntax without causing a syntax error. The template should be compiled and run successfully, treating the comment as a valid part of the expression.

that supporting this syntax would provide developers with more flexibility and readability in their template expressions. It would align with the behavior of other templating engines and allow for a wider range of use cases.

What does the proposed API look like?

The proposed API for allowing the usage of {{}} syntax in Vue 3 templates would involve updating the compiler to recognize and handle HTML-style comments within double curly braces ({{ }}) expressions.

Here's an example of how the proposed API could look:

In the above code, the comment is included within the template expression, providing additional context or directives without affecting the evaluation of the expression.

By updating the compiler to support this syntax, Vue 3 would allow developers to use HTML-style comments within template expressions, making the templates more expressive and self-explanatory.

This enhancement would involve modifying the compiler's parsing and transformation logic to recognize and handle the comment syntax when encountered within template expressions. The comments would be treated as non-evaluating content, allowing them to coexist with the actual expressions and be ignored during the rendering process.

#8621

the code between {{ }} is a Javascript expression. So you can use a JS block comment:

<template>
  <div>
    <p>{{ /* test */ message }}</p>
  </div>
</template>