Vue - Official `v2.0.20`: Syntax highlighting for components is broken when Nuxt (<= v3.11.2) component auto-import is disabled

[hecticme]

After upgrading Vue - Official from v2.0.19 to v2.0.20 or v2.0.21, syntax highlighting for components does not work if you disable Nuxt auto import for components (The issue only occurs with Nuxt prior to version 3.12.0).

Vue - Official extension or vue-tsc version

Vue - Official v2.0.20, v.2.0.21

VSCode version

1.90.0 (latest)

Vue version

3.4.27 (latest)

Nuxt version

3.11.2 (As long as it's prior to 3.12.0)

TypeScript version

5.4.5 (latest)

System Info

System:
    OS: Linux 6.8 Fedora Linux 40 (Workstation Edition)
    CPU: (4) x64 Intel(R) Core(TM) i5-6300HQ CPU @ 2.30GHz
    Memory: 10.10 GB / 15.48 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.14.0/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.3.0 - ~/.nvm/versions/node/v20.14.0/bin/pnpm
  Browsers:
    Chrome: 125.0.6422.141

Steps to reproduce

1. Create a new Nuxt project with npx nuxi@latest init <project-name>. Then install any Nuxt version that is smaller than 3.12.0 (the project I'm working with has [email protected], but the error still occurs with [email protected]).
2. Disable auto-import for component in nuxt.config.ts following the guide on this link: https://nuxt.com/docs/guide/concepts/auto-imports#auto-imported-components

export default defineNuxtConfig({
  components: {
    dirs: []
  }
})

3. Run pnpm run postinstall and reload VSCode. Syntax highlighting for components is now broken, even if you have explicitly imported them.

In the reproduction repository, you can take a look at app.vue. There is no syntax highlighting for ComponentA even though I have already imported it.

Revert Vue - Official to v2.0.19 or update Nuxt to v3.12.0 will fix the issue.

Link to minimal reproduction

https://github.com/hecticme/volar-component-syntax-highlighting

Any additional comments?

I have already tried deleting node_modules, .nuxt. I did npx nuxi cleanup ., re-ran postinstall, reload VSCode. The problem still occurs.

Images with editor token if they somehow help:

[Ingramz]

I noticed something similar in one of my projects except that it keeps happening also after upgrading to nuxt 3.12.1. Since the symptoms are similar (no syntax highlighting, reverting to v2.0.19 makes it work again), I decided to post here.

Interestingly what seems to be causing this in my case is when vue-recaptcha nuxt module has been enabled in the project via nuxt.config.ts.

Repro:

• Download and unpack example project: vlt-4461-repro.zip
• Run npm install
• Open app.vue and witness that there is no syntax highlighting for NuxtWelcome component
• Disable vue-recaptcha module from nuxt.config.ts by deleting the line or commenting it out
• Run npm run postinstall to regenerate types
• Use command palette and run Developer: Reload Window to restart everything
• See that syntax highlighting has returned

[xMorthi]

I have similiar issue.

In my case i use

• nuxt: 3.12.1
• compatibilityMode: 4
• modules: nuxt-ui
• new directory nuxt directory structure (v4)
• vue extension: 2.0.21

syntax highlighting is totally incosistent. in the image below look at UFormGroup

also when i scroll fast all element are flickering

note downgrading extension didn't solve the issue

[hecticme]

This issue seems to be resolved for me since v2.0.26. The others stated similar problem as mine but they don't look to be identical so I'm going to close this issue 🙌. Please create a new one if it's still reproducible for you.