Version

3.2.31

Reproduction link

github.com

Steps to reproduce

1. Clone https://github.com/Maxim-Mazurok/vue3-define-emits-issue-repro
2. Run npm ci
3. Run npm run build
4. Open index.html, see vue-elements.js:1 Uncaught ReferenceError: defineEmits is not defined in the console

What is expected?

I expect it not to build or give some build-time warning without importing defineEmits

What is actually happening?

It builds fine, passes all typechecks, eslint doesn't complain (all because of https://github.com/vuejs/core/blob/main/packages/runtime-core/types/scriptSetupHelpers.d.ts I guess

But then it doesn't actually work when used as Custom Elements in TSX

As a workaround, I'll be using https://www.npmjs.com/package/patch-package to remove the global type from the bottom of node_modules@vue\runtime-core\dist\runtime-core.d.ts

defineProps/Emits/Expose are compiler Hints and only available in <script setup>, so this is expected.

https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits

You also don't need them when using TSX with defineComponent(), just use the normal options that are available for this:

• https://vuejs.org/guide/typescript/options-api.html#typing-component-emits
• https://vuejs.org/api/options-state.html#emits

defineProps/Emits/Expose are compiler Hints and only available in <script setup>, so this is expected.

vuejs.org/api/sfc-script-setup.html#defineprops-defineemits

You also don't need them when using TSX with defineComponent(), just use the normal options that are available for this:

• vuejs.org/guide/typescript/options-api.html#typing-component-emits
• vuejs.org/api/options-state.html#emits

Oh wow, it makes much more sense, this works perfectly, thank you!

But let me explain the source of confusion:

Here's what I was googling: "vue 3 define emits typescript" This is the first result: https://vuejs.org/guide/typescript/composition-api.html This is second: https://vuejs.org/guide/typescript/overview.html

I checked the first 5 pages, and your link isn't on any of them...

Another major confusion: the "Typing Component Emits" section here: https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits is completely different from the section with exactly the same name here: https://vuejs.org/guide/typescript/options-api.html#typing-component-emits

I strongly believe that documentation can be improved, at least by linking these two sections to each other, so feel free to use this issue to track this documentation issue. Thank you!

I strongly believe that documentation can be improved,

Agreed. :)

Another major confusion: the "Typing Component Emits" section here: https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits is completely different from the section with exactly the same name here: https://vuejs.org/guide/typescript/options-api.html#typing-component-emits

Well, in part they are different because there's not defineEmits() in Options API. But I agree that the second in the former link would profit from a more extensive coverage of how to define emits when using composition API with a normal defineComponent({}). not defineEmits in <script setup>. Essentially, it works just like for Options API, but it's only mentioned too briefly.

It would be amazin if you could open an issue in our docs repository and let the docs team know about your experience. you can link back to this issue to save some repetition.

shall we make defineProps available in tsx as well, since we have plugin @vitejs/plugin-vue-jsx, maybe some work could be done when detected in defineComponent?