Skip to content

html.customData from settings.json ignored in Vue templates (parity gap with native HTML) #5926

@CalebM1987

Description

@CalebM1987

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:[email protected]"
  },
  "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:[email protected]",
    "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)
    • these libraries provide definitions for .vscode/settings.json for 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:

  1. Clone the reproduction repo and run npm install.
  2. Open .vscode/settings.json to verify html.customData paths point correctly to JSON files in node_modules.
  3. Open vanilla-app/index.html (vanilla). Hover over <arcgis-map> or <calcite-button>.
    • Result: Full documentation and attribute suggestions appear correctly.
  4. 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:

Image

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:

Image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions