Syntax Highlighting Issue with <route lang="yaml"> Block in Vue Files on VS Code

[mrsiahpoosh]

I'm experiencing an issue with syntax highlighting in Visual Studio Code when using blocks in Vue single-file components.

In my Vue component file, I’m adding a custom block to define metadata for routes. Here’s an example:

<route lang="yaml">
meta:
    requiresAuth: true
</route>

<i18n src="./i18n/intercity_map_i18n.json" />

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
// other imports and code here
</script>

When I add this block, the syntax highlighting for the entire file breaks, and all code following this block turns blue. However, if I comment out the block, the syntax highlighting returns to normal (as shown in the images below).

is there any solution to fix this ?