diff --git a/src/config.json b/src/config.json
index 5faf8cc504..3128e4173d 100644
--- a/src/config.json
+++ b/src/config.json
@@ -719,6 +719,7 @@
           "name": "Badge",
           "cName": "徽标",
           "desc": "徽标",
+          "setup": true,
           "author": "liqiong"
         },
         {
diff --git a/src/packages/__VUE/badge/badge.taro.vue b/src/packages/__VUE/badge/badge.taro.vue
new file mode 100644
index 0000000000..1d5e97972b
--- /dev/null
+++ b/src/packages/__VUE/badge/badge.taro.vue
@@ -0,0 +1,66 @@
+<template>
+  <view class="nut-badge">
+    <view v-show="!hidden && !dot && $slots.icon" class="nut-badge__icon" :style="style">
+      <slot name="icon"></slot>
+    </view>
+    <slot></slot>
+    <view
+      v-show="!hidden && (content || dot)"
+      class="nut-badge__content nut-badge__content--sup"
+      :class="{ 'nut-badge__content--dot': dot, 'nut-badge__content--bubble': !dot && bubble }"
+      :style="style"
+    >
+      {{ content }}
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'NutBadge'
+})
+
+export type BadgeProps = Partial<{
+  value: string | number
+  max: number
+  dot: boolean
+  bubble: boolean
+  hidden: boolean
+  top: string
+  right: string
+  zIndex: number
+  color: string
+}>
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  max: 10000,
+  dot: false,
+  bubble: false,
+  hidden: false,
+  top: '0',
+  right: '0',
+  zIndex: 9,
+  color: ''
+})
+
+const style = computed(() => {
+  return {
+    top: `${props.top}px`,
+    right: `${props.right}px`,
+    zIndex: props.zIndex,
+    background: props.color
+  }
+})
+
+const content = computed(() => {
+  if (props.dot) return
+  const value = props.value
+  const max = props.max
+  if (typeof value === 'number' && typeof max === 'number') {
+    return max < value ? `${max}+` : value
+  }
+  return value
+})
+</script>
diff --git a/src/packages/__VUE/badge/badge.vue b/src/packages/__VUE/badge/badge.vue
new file mode 100644
index 0000000000..1d5e97972b
--- /dev/null
+++ b/src/packages/__VUE/badge/badge.vue
@@ -0,0 +1,66 @@
+<template>
+  <view class="nut-badge">
+    <view v-show="!hidden && !dot && $slots.icon" class="nut-badge__icon" :style="style">
+      <slot name="icon"></slot>
+    </view>
+    <slot></slot>
+    <view
+      v-show="!hidden && (content || dot)"
+      class="nut-badge__content nut-badge__content--sup"
+      :class="{ 'nut-badge__content--dot': dot, 'nut-badge__content--bubble': !dot && bubble }"
+      :style="style"
+    >
+      {{ content }}
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'NutBadge'
+})
+
+export type BadgeProps = Partial<{
+  value: string | number
+  max: number
+  dot: boolean
+  bubble: boolean
+  hidden: boolean
+  top: string
+  right: string
+  zIndex: number
+  color: string
+}>
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  max: 10000,
+  dot: false,
+  bubble: false,
+  hidden: false,
+  top: '0',
+  right: '0',
+  zIndex: 9,
+  color: ''
+})
+
+const style = computed(() => {
+  return {
+    top: `${props.top}px`,
+    right: `${props.right}px`,
+    zIndex: props.zIndex,
+    background: props.color
+  }
+})
+
+const content = computed(() => {
+  if (props.dot) return
+  const value = props.value
+  const max = props.max
+  if (typeof value === 'number' && typeof max === 'number') {
+    return max < value ? `${max}+` : value
+  }
+  return value
+})
+</script>
diff --git a/src/packages/__VUE/badge/doc.en-US.md b/src/packages/__VUE/badge/doc.en-US.md
index 29b8c87b1e..ef1dbc123c 100644
--- a/src/packages/__VUE/badge/doc.en-US.md
+++ b/src/packages/__VUE/badge/doc.en-US.md
@@ -57,6 +57,17 @@ app.use(Badge)
 | default | Default slot |
 | icon | Icon slot |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  BadgeProps,
+  BadgeInstance
+} from '@nutui/nutui'
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/badge/doc.md b/src/packages/__VUE/badge/doc.md
index 9db164f3ff..2bb8d4588a 100644
--- a/src/packages/__VUE/badge/doc.md
+++ b/src/packages/__VUE/badge/doc.md
@@ -57,6 +57,17 @@ app.use(Badge)
 | default | 徽标包裹的子元素 |
 | icon | 徽标自定义 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  BadgeProps,
+  BadgeInstance
+} from '@nutui/nutui'
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/badge/doc.taro.md b/src/packages/__VUE/badge/doc.taro.md
index 63e8c212c4..e4aeeee25b 100644
--- a/src/packages/__VUE/badge/doc.taro.md
+++ b/src/packages/__VUE/badge/doc.taro.md
@@ -57,6 +57,17 @@ app.use(Badge)
 | default | 徽标包裹的子元素 |
 | icon | 徽标自定义 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  BadgeProps,
+  BadgeInstance
+} from '@nutui/nutui-taro'
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/badge/index.taro.ts b/src/packages/__VUE/badge/index.taro.ts
new file mode 100644
index 0000000000..62859a2d22
--- /dev/null
+++ b/src/packages/__VUE/badge/index.taro.ts
@@ -0,0 +1,11 @@
+import Badge from './badge.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Badge)
+
+export type { BadgeProps } from './badge.taro.vue'
+
+export type BadgeInstance = ComponentPublicInstance & InstanceType<typeof Badge>
+
+export { Badge, Badge as default }
diff --git a/src/packages/__VUE/badge/index.taro.vue b/src/packages/__VUE/badge/index.taro.vue
deleted file mode 100644
index 0f120ab9cb..0000000000
--- a/src/packages/__VUE/badge/index.taro.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <view class="nut-badge">
-    <view v-show="!hidden && !dot && $slots.icon" class="nut-badge__icon" :style="stl">
-      <slot name="icon"></slot>
-    </view>
-    <slot></slot>
-    <view
-      v-show="!hidden && (content || dot)"
-      class="nut-badge__content nut-badge__content--sup"
-      :class="{ 'nut-badge__content--dot': dot, 'nut-badge__content--bubble': !dot && bubble }"
-      :style="stl"
-      v-text="content"
-    >
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import { computed, reactive } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-const { create } = createComponent('badge')
-export default create({
-  props: {
-    value: {
-      type: [String, Number]
-    },
-    max: {
-      type: Number,
-      default: 10000
-    },
-    dot: {
-      type: Boolean,
-      default: false
-    },
-    bubble: {
-      type: Boolean,
-      default: false
-    },
-    hidden: {
-      type: Boolean,
-      default: false
-    },
-    top: {
-      type: String,
-      default: '0'
-    },
-    right: {
-      type: String,
-      default: '0'
-    },
-    zIndex: {
-      type: Number,
-      default: 9
-    },
-    color: {
-      type: String,
-      default: ''
-    }
-  },
-
-  setup(props) {
-    const state = reactive({})
-
-    const stl = computed(() => {
-      return {
-        top: `${props.top}px`,
-        right: `${props.right}px`,
-        zIndex: props.zIndex,
-        background: props.color
-      }
-    })
-
-    const content = computed(() => {
-      if (props.dot) return
-      const value = props.value
-      const max = props.max
-      if (typeof value === 'number' && typeof max === 'number') {
-        return max < value ? `${max}+` : value
-      }
-      return value
-    })
-
-    return {
-      state,
-      stl,
-      content
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/badge/index.ts b/src/packages/__VUE/badge/index.ts
new file mode 100644
index 0000000000..66ea212acc
--- /dev/null
+++ b/src/packages/__VUE/badge/index.ts
@@ -0,0 +1,11 @@
+import Badge from './badge.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Badge)
+
+export type { BadgeProps } from './badge.vue'
+
+export type BadgeInstance = ComponentPublicInstance & InstanceType<typeof Badge>
+
+export { Badge, Badge as default }
diff --git a/src/packages/__VUE/badge/index.vue b/src/packages/__VUE/badge/index.vue
deleted file mode 100644
index 0f120ab9cb..0000000000
--- a/src/packages/__VUE/badge/index.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <view class="nut-badge">
-    <view v-show="!hidden && !dot && $slots.icon" class="nut-badge__icon" :style="stl">
-      <slot name="icon"></slot>
-    </view>
-    <slot></slot>
-    <view
-      v-show="!hidden && (content || dot)"
-      class="nut-badge__content nut-badge__content--sup"
-      :class="{ 'nut-badge__content--dot': dot, 'nut-badge__content--bubble': !dot && bubble }"
-      :style="stl"
-      v-text="content"
-    >
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import { computed, reactive } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-const { create } = createComponent('badge')
-export default create({
-  props: {
-    value: {
-      type: [String, Number]
-    },
-    max: {
-      type: Number,
-      default: 10000
-    },
-    dot: {
-      type: Boolean,
-      default: false
-    },
-    bubble: {
-      type: Boolean,
-      default: false
-    },
-    hidden: {
-      type: Boolean,
-      default: false
-    },
-    top: {
-      type: String,
-      default: '0'
-    },
-    right: {
-      type: String,
-      default: '0'
-    },
-    zIndex: {
-      type: Number,
-      default: 9
-    },
-    color: {
-      type: String,
-      default: ''
-    }
-  },
-
-  setup(props) {
-    const state = reactive({})
-
-    const stl = computed(() => {
-      return {
-        top: `${props.top}px`,
-        right: `${props.right}px`,
-        zIndex: props.zIndex,
-        background: props.color
-      }
-    })
-
-    const content = computed(() => {
-      if (props.dot) return
-      const value = props.value
-      const max = props.max
-      if (typeof value === 'number' && typeof max === 'number') {
-        return max < value ? `${max}+` : value
-      }
-      return value
-    })
-
-    return {
-      state,
-      stl,
-      content
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/tabbaritem/tabbar-item.taro.vue b/src/packages/__VUE/tabbaritem/tabbar-item.taro.vue
index fb1990f453..e3a8f20ba6 100644
--- a/src/packages/__VUE/tabbaritem/tabbar-item.taro.vue
+++ b/src/packages/__VUE/tabbaritem/tabbar-item.taro.vue
@@ -34,7 +34,7 @@ import { renderIcon } from '@/packages/utils/create'
 import { useRouter } from '@/packages/utils/useRoute'
 import { useParent } from '@/packages/utils'
 import { TABBAR_KEY } from '../tabbar/types'
-import NutBadge from '../badge/index.vue'
+import NutBadge from '../badge/index.taro'
 
 defineOptions({
   name: 'NutTabbarItem'
diff --git a/src/packages/__VUE/tabbaritem/tabbar-item.vue b/src/packages/__VUE/tabbaritem/tabbar-item.vue
index fb1990f453..bdcf20079b 100644
--- a/src/packages/__VUE/tabbaritem/tabbar-item.vue
+++ b/src/packages/__VUE/tabbaritem/tabbar-item.vue
@@ -34,7 +34,7 @@ import { renderIcon } from '@/packages/utils/create'
 import { useRouter } from '@/packages/utils/useRoute'
 import { useParent } from '@/packages/utils'
 import { TABBAR_KEY } from '../tabbar/types'
-import NutBadge from '../badge/index.vue'
+import NutBadge from '../badge'
 
 defineOptions({
   name: 'NutTabbarItem'