Custom Elements Manifet support in Vetur

[liamdebeasi]

• I have searched through existing issues

Feature Request

Hi there,

The Web Components Community Group recently released the Custom Elements Manifest (CEM) which seeks to improve IDE support for Web Components/custom elements. Similar to Vetur's Component Data feature, CEM outputs a JSON file that has information about a set of custom elements such as their properties, CSS Variables, slots, and more.

Given the overlap between Vetur's Component Data feature and CEM and given that more teams are shipping UI Libraries for Vue built on Web Components, I wanted to start a thread here to see if there is any interest in adding support for the CEM format within Vetur?

Libraries such as Ionic Vue, Apollo Elements, Shoelace and more currently need to output multiple JSON files just to have IDEs recognize their components. The CEM Scheme gives a single unified way of expressing these Web Components so having Vetur be able to understand CEM would be helpful for developers consuming these libraries in Vue.

As an example, Ionic Vue currently has to generate JSON files for both web-types and vetur just to have the respective IDEs work with Web Components: https://github.com/ionic-team/ionic-framework/tree/master/packages/vue/scripts. We do plan on eventually supporting the Custom Elements Schema, so it would be great for Web Component libraries such as Ionic Vue to only have to output a single CEM JSON file and have Vetur understand it.

The CEM schema includes input from a wide variety of stakeholders such as Adobe, Stencil, Google, Microsoft, ING, RedHat, and more so there is broad support for this within the Web Component community.

[Westbrook]

Thanks for starting the conversation here @liamdebeasi!

At Adobe I work on the Spectrum Web Components where we just made our first release featuring the new Custom Elements Manifest version this morning. We do know of at least a few internal consumers that work with our library within their larger Vue application, can only assume more of the same with external consumers, and would love to hear if there were efficiencies in this way to ensure we're supporting all of our consumers in being as successful as possible when choosing SWC when building their applications.

Looking forward to hearing more here!

[rchl]

There is related (stale) discussion in vuejs/vue#7186