YAML Syntax Highlighting

[robertmoura]

Vue - Official extension or vue-tsc version

2.0.28

VSCode version

1.92.0

Vue version

3.4.35

TypeScript version

5.5.4

System Info

System:
  OS: macOS 14.6
  CPU: (8) arm64 Apple M1
  Memory: 434.44 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 22.1.0 - /usr/local/bin/node
  Yarn: 4.4.0 - /usr/local/bin/yarn
  npm: 10.7.0 - /usr/local/bin/npm
Browsers:
  Chrome: 127.0.6533.89
  Edge: 127.0.2651.86
  Safari: 17.6

Steps to reproduce

Put the following into a single file component:

<route lang="yaml">
property: 'value'
</route>

<template>
    <div property="3"></div>
</template>

What is expected?

The YAML code is highlighted without affecting the template highlighting.

What is actually happening?

The route block seems to be breaking the highlighting of the rest of the single file component.

It only seems to be a problem with YAML. Here's an example with JSON:

Link to minimal reproduction

No response

Any additional comments?

This issue may be related to https://github.com/vuejs/language-tools/issues/2060. Although I think this may be something else because it used to work but seems to have broken for me recently. Changing the Vue Extension versions doesn't seem to fix the issue either so I wonder whether it might be something else?

UPDATES 21 August 2024

See https://github.com/vuejs/language-tools/issues/4654#issuecomment-2299996265