Vue.js SFCs Show Unexpected Syntax Highlighting with Vue Official Extension

Bug Reports
1

Bug Description

The Vue Official extension (formerly Volar) works correctly in VS Code, providing accurate syntax highlighting in Vue Single File Components (SFC). However, in Cursor, syntax highlighting in .vue files seems broken or inconsistent.

  • Plain HTML inner text is incorrectly highlighted in red, as if it were an error
  • Many parts of the code are highlighted in red.
  • Type hint popups (like when hovering over props or variables) are missing syntax highlighting entirely or partially

image
image1660×2140 509 KB

In Cursor.

image
image1906×2142 200 KB

In VS Code.

Steps to Reproduce

Install the “Vue - Official” extension in Cursor then open a Vue Single File Component (.vue).

Environment Info

  • OS: macOS 15.4
  • Cursor Version: 0.49.6 (Universal)
  • Vue - Official Extension Version: 2.2.10 (Issue also exists in previous versions)

I’m not sure whether this behavior is caused by Cursor itself, the Vue - Official extension, or potential differences in the VS Code extension API implementation. Any insights on what might be causing this would be appreciated.