Components are not highlighted

[AmitJoki]

With vue.vscode-typescript-vue-plugin 1.8.27 and vue.volar 1.8.27 the components were highlighted correctly in a different color (green in Dark Modern Theme).

When vue.volar updated to 2.0.4, it asked to uninstall vue.vscode-typescript-vue-plugin and I did and the components are no longer highlighted. They look like other HTML elements (blue in Dark Modern Theme).

[lazercaveman]

Same - the peek feature isn't working anymore as well (before, when pressing CMD while clicking on an import path or a component within the template, the IDE would open/redirect to the related components file).

[sylann]

I have a similar problem, vue language tools seem to no longer detect Vue components in the template.

I don't have the problem with v1.8.27.

[lazercaveman]

Since the "Take Over Mode" is now deprecated, you have to reactivate "TypeScript and JavaScript Language Features" in vs Code - after that everything should work just fine again : )

[n-ochs]

@lazercaveman - I tried this and unfortunately it did not work. For everyone else looking here, you have to search extensions for "@builtin typescript" and you will find it

[Tom-El-Egant]

Same issue here: we have a monorepo, 2 out of 3 workspaces are working fine (components are linked and fully typed), in the third workspace the components are not typed. All 3 workspaces have exactly the same nuxt.config and tsconfig. Downgrading to v1.8.27, integrating Volar plugin and disable builtin typescript plugin solves the issue.

[nicolaspda]

Now there's an underline in the components and the color is the same as the directives/props. I really prefer the old way when the color was a distinct light blue.

I'm using VS code and Monokai theme.

[mouldt]

Not sure if this is related but i get an error in the VScode Extension Host log: TypeError: Invalid Version: 5 at new n (c:\Users\XXX.vscode\extensions\vue.volar-2.0.4\dist\client.js:46:15557) at hP (c:\Users\Tony.vscode\extensions\vue.volar-2.0.4\dist\client.js:46:27441) at Object._P [as gte] (c:\Users\XXX.vscode\extensions\vue.volar-2.0.4\dist\client.js:46:27782) at o (c:\Users\XXX.vscode\extensions\vue.volar-2.0.4\dist\client.js:63:633) at async s (c:\Users\XXX.vscode\extensions\vue.volar-2.0.4\dist\client.js:56:519)

This shows up when i open a .vue file.

[ascott18]

Coloring is sometimes working for me, but for some reason it is affected by scroll position in the document. All I'm doing in this video is scrolling up and down:

https://github.com/vuejs/language-tools/assets/5017521/42d99b22-ab8d-4204-a4a0-f7f61d75ba1b

[ascott18]

This is also somehow related to the height of the editor. Resizing the editor height without scrolling also affects this.

https://github.com/vuejs/language-tools/assets/5017521/913ca9a3-d7b9-4ac0-a40b-aee85b051609

[gabrielmaxgb]

How could it have been deployed if it would have caused so many issues simultaneously?

[sa8ab]

It's looks like related to types. In Nuxt 3.10.3 the auto imported components are not detected and are type of unknown

[ghost]

How could it have been deployed if it would have caused so many issues simultaneously?

and they deprecated volar typescript... so bad. vscode feels like im coding from pentium 4 pc

[sa8ab]

@frkam You can install depricated extension Press CTRL P to open up the command of VS code type in ext install Vue.vscode-typescript-vue-plugin Install older version of Volar. And don't forget to disable built in ts features of vs code.

[ghost]

@sa8ab thank you so much, i didn't even thin about it before this. Old vue extension with volar-ts works wonderful compared to new version

[mauriciopfl]

Agora há um sublinhado nos componentes e a cor é a mesma das diretivas/adereços. Eu realmente prefiro o jeito antigo, quando a cor era um azul claro distinto.

Estou usando o código VS e o tema Monokai.

### Same problem here. It was very bad this way, very messy and disorganized. Is there any way to go back to the old model?

[Laurelin]

Still an issue. needed to downgrade the update to 1.8.27 to get correct typing on components

[marius-mcfly]

Still an issue. needed to downgrade the update to 1.8.27 to get correct typing on components

Same here

[manchenkoff]

FYI, with these versions everything works fine and highlighting is back:

• Vue - Official v2.0.7
• JavaScript and Typescript Nightly v5.5.20240326

[johnsoncodehk]

There is multiple issues:

• The issue of missing highlight for component tags should have been resolved in the latest version.

• Regarding the issue of color variation for component tag highlights, this is a design limitation of the mixed mode. Since tsserver does not have component semantic tokens, we can only use approximate class semantic tokens as a substitute, which can cause problems in some themes. We are looking for a solution, so please open a new issue for this. Please track #4156.

• The highlight and scrolling issues have been resolved in the latest commit and will fixed in version 2.0.8.

[mapleroyal]

This is still an issue. I completely wiped everything on the machine related to vscode > rebooted > reinstalled and did not log in > init'd a new vue project > installed Vue - Official when prompted > still no component highlighting, plus the associated problems (can't cmd+click vue components/modules/imports).

[mapleroyal]

Rolling back to 2.0.24 fixes it...

[RachaunH]

You deserve a sticker ⭐