nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
3.76k stars 458 forks source link

Type `onClick` is missing when use UButton in tsx #712

Open shiny opened 11 months ago

shiny commented 11 months ago

Version

@nuxt/ui: v2.8.1 nuxt: v3.7.3

Reproduction Link

https://stackblitz.com/edit/nuxt-ui-c8yl8v?file=app.vue

Steps to reproduce

<template>
  <Button />
</template>

<script setup lang="tsx">
import { UButton } from '#components'
const sayHello = () => {
  console.log('Hello There!')
}
const Button = <UButton onClick={sayHello}>Go</UButton>
</script>

in Visual Studio Code, onClick will cause a TS Error #2322

What is Expected?

Should not produce a typing error.

What is actually happening?

Actually this example works great in runtime, which follows the vue3 documentation https://vuejs.org/guide/extras/render-function.html#v-on —— what i do is just replace button to UButton. The typing error should not appear.

mcpanl commented 9 months ago

I have also encountered this issue. Although it does not affect the runtime, it would be more user-friendly to include various Vue events in the component's type definition, such as onClick and onChage

@benjamincanac @danielroe 🙏🙏🙏

Image

YipingRuan commented 6 months ago

@mcpanl Unlike other UI frameworks, there is no "events" listed at docs https://ui.nuxt.com/components/button

censujiang commented 1 month ago

same problem