Usage with typescript in script setup scoped

[melumo]

I'm using the library with the lang property in my script and it returned the following error:

Type '{}' is not assignable to type 'ComponentProps<VNode<RendererNode, RendererElement, { [key: string]: any; }>>'.
  Type '{}' is missing the following properties from type 'VNode<RendererNode, RendererElement, { [key: string]: any; }>': type, props, key, ref, and 13 more.ts(2322)

My script looks like this:

<script setup lang="ts">
import { Icon } from "#components"

interface ButtonProps {
  tag?: "a" | "button"
  color?: "primary" | "secondary" | "tertiary"
  size?: "normal" | "full"
  type?: "button" | "submit" | "reset"
  href?: string
  icon?: string
}

const props = withDefaults(defineProps<ButtonProps>(), {
  tag: "button",
  size: "normal",
  color: "primary"
})

const ButtonIcon = h(Icon, { name: props.icon })
</script>

Thanks!

[atinux]

I wish I could help you but I am not really at TypeScript sadly.

[selemondev]

Hey @nxrom , with the latest releases of Nuxt 3 and Vue, that error has been resolved. Try this:

// components/IconComponent.vue

<script setup lang="ts">
import { Icon } from "#components"

interface ButtonProps {
    tag?: "a" | "button"
    color?: "red" | "blue" | "green"
    size?: "normal" | "full"
    type?: "button" | "submit" | "reset"
    href?: string
    icon?: string
}

const props = withDefaults(defineProps<ButtonProps>(), {
    tag: "button",
    size: "normal",
    color: "red",
    icon: ""
})
</script>

<template>
    <component :is="props.tag" v-bind="props" :style="`color: ${props.color}`">
        <Icon :name="props.icon" />
    </component>
</template>

// app.vue

<template>
  <div>
    <IconComponent icon="ph:sun" tag="button" color="green" />
  </div>
</template>