typing purpose exposes object

[lyle45]

Thought of an idea to attach an exposes property to vue definition object to declare exposed methods available when approaching component through refs (from the outside)

Although accessing a component through ref actually refers to the instance, and as such anything exposed to the template is available through the instance ref

it is sometime necessary to expose specific functionalities outwards to be used through template refs (ie, focus)

in Vue 2, although still undocumented, it was a bit simpler to comprehend since you had a methods object which eventually is accessible from the outside

in Vue 3 it is even harder to understand what piece goes where, wether stuff returned through setup function is exposed, or whether template refs are also registered through $refs object, and in general what is available from the outside.

currently this method of development is generally discouraged, mainly because it is untyped, undocumented, and can change internally with no indication someone from the outside might be using this method or property.

come in, the exposes object, which would generally offer typing only, similar to emits object. it would both let IDEs autocomplete exposed items easily, and let a person working on a component know that someone might be relying on this piece of information or functionality.

this is still not fully baked in terms of enforcment but the direction is clear. Let me hear your thoughts

[jods4]

Have you seen defineExpose?
https://v3.vuejs.org/api/sfc-script-setup.html#defineexpose

It is used in a script setup component to define what public API is available to outside code that would grab a ref to the component.
If you use Volar, you also get typing in IDE.

[lyle45]

Missed it and it's pretty similar but it looks like it would only work on a script setup component. Would It work on a regular component with setup function?

[lyle45]

Following solution is not sufficient and should be expanded to full vue definition