Generate types for Web Components for typescript.

[Abdo-reda]

I am creating a vue web component library and I will be using it in different projects that use different frameworks (vue, angular, ..).

I have already setup my project and I tested it, and it works fine. However, I am having trouble with typescript. When I use the web components in vue or angular, no types is detected. Vue sees the component as Unknown and Angular see it as a standard HTMLElement.

What I want, is to be able to generate types (in .d.ts file) for my web components, so that when they are used elsewhere, their properties and events are auto completed by the framework they are used in, is that possible? I would think so ...

I tried looking online, and the closest thing I found was this. however, it didn't work, and I think it will only work with vue projects. I want to create general definitions/types/interfaces...

Any help is appreciated.

[pboth1304]

I'm currently facing a similiar issue. We also want to create a vue web component library and use it in different frameworks.
Similiar to @Abdo-reda everything works fine but the types are missing when using the components in other applications.

I've tried generating types with vite-plugin-dts and also the approach mentioned in the Vue docs. While type generation works with these methods, the types remain unknown when used in a Vue project. Am I overlooking something?

Ideally, I'd prefer a solution similar to Stencil.js, which automatically generates types like HTMLIonButtonElement for components, making them easy to use in the target application: https://stenciljs.com/docs/typed-components#typed-components .