How to use defineProps/defineEmits/defineModel with defineComponent JSX/TSX approach?

[Maxim-Mazurok]

My components look like this:

import { defineComponent, type PropType } from "vue";

export const Header = defineComponent({
  name: "Header",
  props: {
    level: {
      type: Number as PropType<1 | 2 | 3 | 4 | 5 | 6>,
      default: 3,
      required: false,
    },
  },
  setup(props) {
    return () => <h1>I'm on {props.level} level</h1>;
  },
});

I'm using JSX/TSX syntax with Vue 3 Composition API.

As you can see, the only thing using Options API is props. I'd like to use defineProps() instead, like so:

import { defineComponent, type PropType } from "vue";

export const Header = defineComponent({
  name: "Header",
  setup() {
    const props = defineProps({
      level: {
        type: Number as PropType<1 | 2 | 3 | 4 | 5 | 6>,
        default: 3,
        required: false,
      },
    });
    return () => <h1>I'm on {props.level} level</h1>;
  },
});

However, I'm always getting defineProps is not defined error during runtime. I've tried using type-only definition, same issue.

I also couldn't find any example of defineProps used with defineComponent, only examples I could find were using Options API to define props.

So is it at all possible to use these new shiny defineProps/defineEmits/defineModel methods in JSX/TSX syntax? I'm using latest vite and latest vue.

[Ray-D-Song]

You can use setupComponent in Vue Macros.
But it's a experimental feature.

[Maxim-Mazurok]

Interesting! However, they mention "TypeScript support is not yet completed" in the "Known Issues" section, so it's not a good fit for my needs. To be honest, I think that adding TS support with the current API would be extremely challenging.

[sunjinbo321]

I have the same problem

[s3xysteak]

defineProps...Apis are only happened in compile-time, which is not a actually function, so you cannot use out of sfc 😢 .