Vue component highlighting, hover, and Ctrl+Click (or F12) not working in WSL2

[Mathboss42]

Vue - Official extension or vue-tsc version

3.1.1

VSCode version

1.105.1

Vue version

3.5.13

TypeScript version

5.7.3

System Info

Windows 11 24H2
WSL 2 2.5.10.0 - Ubuntu 24.04.3

System:
    OS: Linux 6.6 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 255 w/ Radeon 780M Graphics
    Memory: 11.38 GB / 15.25 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.21.0 - /home/REDACTED_USERNAME/.nvm/versions/node/v22.21.0/bin/node
    npm: 10.9.4 - /home/REDACTED_USERNAME/.nvm/versions/node/v22.21.0/bin/npm

package.json dependencies

{
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.6.0",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/vue-fontawesome": "^3.0.3",
    "@tiptap/extension-document": "^2.6.6",
    "@tiptap/extension-image": "^2.6.6",
    "@tiptap/extension-link": "^2.6.6",
    "@tiptap/extension-mention": "^2.6.6",
    "@tiptap/extension-paragraph": "^2.6.6",
    "@tiptap/extension-placeholder": "^2.6.6",
    "@tiptap/extension-task-item": "^2.11.3",
    "@tiptap/extension-task-list": "^2.11.3",
    "@tiptap/extension-text": "^2.6.6",
    "@tiptap/extension-underline": "^2.6.6",
    "@tiptap/html": "^2.6.6",
    "@tiptap/pm": "^2.6.6",
    "@tiptap/starter-kit": "^2.6.6",
    "@tiptap/suggestion": "^2.6.6",
    "@tiptap/vue-3": "^2.6.6",
    "@vueuse/core": "^10.4.1",
    "@vueuse/integrations": "^10.9.0",
    "axios": "^1.4.0",
    "focus-trap": "^7.5.4",
    "lodash": "^4.17.21",
    "mitt": "^3.0.1",
    "pinia": "^2.1.3",
    "shepherd.js": "^11.2.0",
    "tailwind-merge": "^1.14.0",
    "turndown": "^7.2.0",
    "uuid": "^9.0.0",
    "vue": "^3.5",
    "vue-accessible-color-picker": "^5.0.1",
    "vue-matomo": "^4.2.0",
    "vue-router": "^4.2.2",
    "vue-tippy": "^6.4.4",
    "vuefire": "^3.2"
  },
  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.4",
    "@tailwindcss/typography": "^0.5.9",
    "@types/lodash": "^4.14.197",
    "@types/turndown": "^5.0.4",
    "@types/uuid": "^9.0.2",
    "@typescript-eslint/eslint-plugin": "^6.2.1",
    "@typescript-eslint/parser": "^6.2.1",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "autoprefixer": "^10.4.14",
    "daisyui": "^3.6.1",
    "esbuild": "^0.25.0",
    "eslint": "^8.46.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.0",
    "postcss": "^8.4.27",
    "prettier": "^2.6.2",
    "prettier-plugin-tailwindcss": "^0.4.1",
    "sass": "^1.63.6",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.1.6",
    "vite": "^6.1.1",
    "vite-node": "^3.0.6",
    "vite-svg-loader": "^5.1",
    "vitest": "^3.0.6",
    "vue-eslint-parser": "^8.3.0",
    "vue-tsc": "^3.1.1"
  }
}

Steps to reproduce

1. Open a Vue 3 project inside WSL2 (Ubuntu) using VS Code on Windows 11.
2. Confirm you are in WSL remote mode (bottom-left corner shows WSL: Ubuntu).
3. Open App.vue or any .vue component.
4. Try hovering over a custom component or using Ctrl+click to navigate to its definition.
5. Observe that:
   • Syntax highlighting for components in <template> is missing.
   • Hover and go-to-definition don’t work.

What is expected?

All template features (syntax highlighting, hover, go-to-definition, etc.) should work identically across Windows 10 and Windows 11 with WSL 2, as in Volar 3.0.0.

What is actually happening?

When using VS Code + WSL 2 + Vue 3 on Windows 11, Vue template language features (highlighting, hover info, and Ctrl + click navigation) stop working in single-file components after upgrading above 3.0.0.
The exact same repo, extensions, and VS Code setup work perfectly on my Windows 10 desktop or with Volar 3.0.0 on Windows 11 WSL2 or with Volar 3.1.1 inside a node Docker container on Windows 11 WSL2.

Any newer version (3.0.1, 3.0.2, etc.) causes either missing template highlighting or TS errors.

Inside the App.vue file, neither hovering nor ctrl+click nor highlighting work.
In other .vue files, only ctrl+click works.

Link to minimal reproduction

No response

Any additional comments?

The same repo cloned and opened on a Windows 10 desktop with the same WSL2 + VS Code + Volar setup works perfectly. As it does on Windows 11 laptop when VSCode is attached to a node:22 Docker container instead of WSL 2.

Tried:

• Reinstalling Volar
• Rebuilding node_modules
• Enabling takeover mode
• Deleting .vscode-server
• Updating every package
• Removing all other extensions

None of these steps restored highlighting or hover behavior on Windows 11 WSL 2.

Update 2025/10/22

• Tried on another Windows 10 desktop computer, with the same specs, and getting the same issue as on my two Windows 11 latptops. My personal Windows 10 setup works fine though. Therefore guessing the OS isn't the issue, but still can't pinpoint what is causing this, given that the setups and configurations are seemingly identical.