Vue - Official extension or vue-tsc version
3.2.2
VSCode version
1.107.1
Vue version
3.5.26
TypeScript version
5.9.3
System Info
MacOS Sequoia 15.6.1 (24G90)
package.json dependencies
{
"name": "vue-app",
"version": "0.0.0",
"private": true,
"type": "module",
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build"
},
"overrides": {
"vite": "npm:rolldown-vite@7.2.5"
},
"dependencies": {
"@arcgis/charts-components": "^4.34.9",
"@arcgis/map-components": "^4.34.9",
"vue": "^3.5.26"
},
"devDependencies": {
"@tsconfig/node24": "^24.0.3",
"@types/node": "^24.10.4",
"@vitejs/plugin-vue": "^6.0.3",
"@vue/tsconfig": "^0.8.1",
"npm-run-all2": "^8.0.4",
"typescript": "~5.9.3",
"vite": "npm:rolldown-vite@7.2.5",
"vite-plugin-vue-devtools": "^8.0.5",
"vue-tsc": "^3.2.1"
}
}
Steps to reproduce
Description
The Vue - Official extension does not honor html.customData configurations defined in .vscode/settings.json. While VS Code's native HTML language service correctly loads this data for standard .html files, the Vue language server (Volar) fails to provide the same Intellisense, hover documentation, or attribute completion within .vue SFC templates.
Reproduction
- Reproduction Repository: [GitHub Repo]
- Vendor Data Source:
@arcgis/map-components and @esri/calcite-components (via node_modules)
Steps to Reproduce:
- Clone the reproduction repo and run
npm install.
- Open
.vscode/settings.json to verify html.customData paths point correctly to JSON files in node_modules.
- Open
vanilla-app/index.html (vanilla). Hover over <arcgis-map> or <calcite-button>.
- Result: Full documentation and attribute suggestions appear correctly.
- Open the
vue-app/src/components/MapViewer.vue file in the same workspace. Hover over the same tags in the <template> block.
- Result: No documentation appears; attributes provide no Intellisense.
Expected Behavior
The Vue language server should ingest html.customData from the workspace settings to provide a consistent development experience with native HTML, especially for projects utilizing Web Component libraries.
Actual Behavior
The html.customData setting is ignored by the extension, leaving custom elements without typings in Vue templates despite being correctly configured in the workspace.
Environment
- Extension Version: Vue - Official v3.2.2 (2026)
- VS Code Version: 1.107.1
- Hybrid Mode: I have tried doing this with hybrid mode both enabled and disabled
- OS: MacOS Sequoia 15.6.1 (24G90)
Additional Context
I have verified that isCustomElement is configured in vite.config.ts and vueCompilerOptions in tsconfig.json. While this silences compiler warnings, it does not enable the IDE-level metadata (descriptions and autocomplete) that should be provided by the Custom Data JSON files. Standard HTML files in the same workspace work as expected, indicating this is specific to the Vue Language Server.
What is expected?
Intellisene for custom components should work like normal html tags, especially when isCustomComponent is set to match these third party web component libraries. This is the Intellisense in the vanilla-ts/index.html file:
What is actually happening?
And this is the intellisense in the vue-app/src/components/MapViewer.vue with the same tags, the intellisense is not picked up:
Link to minimal reproduction
https://github.com/CalebM1987/vite-ts-test
Any additional comments?
This may be a limitation of using custom web components within Vue.js, however, this intellisense does work in vanilla apps and react. It would be nice to have this working in vue SFC templates.
Vue - Official extension or vue-tsc version
3.2.2
VSCode version
1.107.1
Vue version
3.5.26
TypeScript version
5.9.3
System Info
package.json dependencies
{ "name": "vue-app", "version": "0.0.0", "private": true, "type": "module", "engines": { "node": "^20.19.0 || >=22.12.0" }, "scripts": { "dev": "vite", "build": "run-p type-check \"build-only {@}\" --", "preview": "vite preview", "build-only": "vite build", "type-check": "vue-tsc --build" }, "overrides": { "vite": "npm:rolldown-vite@7.2.5" }, "dependencies": { "@arcgis/charts-components": "^4.34.9", "@arcgis/map-components": "^4.34.9", "vue": "^3.5.26" }, "devDependencies": { "@tsconfig/node24": "^24.0.3", "@types/node": "^24.10.4", "@vitejs/plugin-vue": "^6.0.3", "@vue/tsconfig": "^0.8.1", "npm-run-all2": "^8.0.4", "typescript": "~5.9.3", "vite": "npm:rolldown-vite@7.2.5", "vite-plugin-vue-devtools": "^8.0.5", "vue-tsc": "^3.2.1" } }Steps to reproduce
Description
The Vue - Official extension does not honor
html.customDataconfigurations defined in.vscode/settings.json. While VS Code's native HTML language service correctly loads this data for standard.htmlfiles, the Vue language server (Volar) fails to provide the same Intellisense, hover documentation, or attribute completion within.vueSFC templates.Reproduction
@arcgis/map-componentsand@esri/calcite-components(vianode_modules)these libraries provide definitions for
.vscode/settings.jsonfor providing intellisense of their HTML elements{ "html.customData": [ "./node_modules/@arcgis/map-components/dist/docs/vscode.html-custom-data.json", "./node_modules/@esri/calcite-components/dist/docs/vscode.html-custom-data.json" ], "css.customData": [ "./node_modules/@arcgis/map-components/dist/docs/vscode.css-custom-data.json", "./node_modules/@esri/calcite-components/dist/docs/vscode.css-custom-data.json" ] }Steps to Reproduce:
npm install..vscode/settings.jsonto verifyhtml.customDatapaths point correctly to JSON files innode_modules.vanilla-app/index.html(vanilla). Hover over<arcgis-map>or<calcite-button>.vue-app/src/components/MapViewer.vuefile in the same workspace. Hover over the same tags in the<template>block.Expected Behavior
The Vue language server should ingest
html.customDatafrom the workspace settings to provide a consistent development experience with native HTML, especially for projects utilizing Web Component libraries.Actual Behavior
The
html.customDatasetting is ignored by the extension, leaving custom elements without typings in Vue templates despite being correctly configured in the workspace.Environment
Additional Context
I have verified that
isCustomElementis configured invite.config.tsandvueCompilerOptionsintsconfig.json. While this silences compiler warnings, it does not enable the IDE-level metadata (descriptions and autocomplete) that should be provided by the Custom Data JSON files. Standard HTML files in the same workspace work as expected, indicating this is specific to the Vue Language Server.What is expected?
Intellisene for custom components should work like normal html tags, especially when
isCustomComponentis set to match these third party web component libraries. This is the Intellisense in thevanilla-ts/index.htmlfile:What is actually happening?
And this is the intellisense in the
vue-app/src/components/MapViewer.vuewith the same tags, the intellisense is not picked up:Link to minimal reproduction
https://github.com/CalebM1987/vite-ts-test
Any additional comments?
This may be a limitation of using custom web components within Vue.js, however, this intellisense does work in vanilla apps and react. It would be nice to have this working in vue SFC templates.