diff --git a/src/config.json b/src/config.json
index bcbd649051..fffc789d91 100644
--- a/src/config.json
+++ b/src/config.json
@@ -406,6 +406,7 @@
           "name": "Rate",
           "cName": "评分",
           "desc": "评分组件",
+          "setup": true,
           "author": "undo"
         },
         {
diff --git a/src/packages/__VUE/comment/components/CmtHeader.taro.vue b/src/packages/__VUE/comment/components/CmtHeader.taro.vue
index 3e67e0382e..004279e1b1 100644
--- a/src/packages/__VUE/comment/components/CmtHeader.taro.vue
+++ b/src/packages/__VUE/comment/components/CmtHeader.taro.vue
@@ -34,7 +34,7 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('comment-header');
-import NutRate from '../../rate/index.taro.vue';
+import NutRate from '../../rate/index.taro';
 
 export default create({
   components: {
diff --git a/src/packages/__VUE/comment/components/CmtHeader.vue b/src/packages/__VUE/comment/components/CmtHeader.vue
index 2bf153377d..209deb3384 100644
--- a/src/packages/__VUE/comment/components/CmtHeader.vue
+++ b/src/packages/__VUE/comment/components/CmtHeader.vue
@@ -34,7 +34,7 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('comment-header');
-import NutRate from '../../rate/index.vue';
+import NutRate from '../../rate/index';
 
 export default create({
   components: {
diff --git a/src/packages/__VUE/form/__tests__/index.spec.tsx b/src/packages/__VUE/form/__tests__/index.spec.tsx
index 05e39d7323..d6f294a788 100644
--- a/src/packages/__VUE/form/__tests__/index.spec.tsx
+++ b/src/packages/__VUE/form/__tests__/index.spec.tsx
@@ -6,7 +6,7 @@ import Textarea from '../../textarea/index.vue';
 import Button from '../../button';
 import Switch from '../../switch/index.vue';
 import Checkbox from '../../checkbox/index.vue';
-import Rate from '../../rate/index.vue';
+import Rate from '../../rate';
 import InputNumber from '../../inputnumber';
 import Range from '../../range/index.vue';
 import Uploader from '../../uploader/index.vue';
diff --git a/src/packages/__VUE/rate/__tests__/__snapshots__/rate.spec.tsx.snap b/src/packages/__VUE/rate/__tests__/__snapshots__/rate.spec.tsx.snap
index ab7d6bec90..0808a5f8ca 100644
--- a/src/packages/__VUE/rate/__tests__/__snapshots__/rate.spec.tsx.snap
+++ b/src/packages/__VUE/rate/__tests__/__snapshots__/rate.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`custom icon 1`] = `
+exports[`Icon: custom icon 1`] = `
 "<svg class="nut-rate-item__icon nut-rate-item__icon--disabled nut-icon nut-icon-Check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="presentation">
   <path d="M998.4 245.029c-219.429 153.6-398.629 332.8-552.229 552.228-40.228 58.514-128 54.857-164.571-3.657-69.486-106.057-149.943-186.514-256-256-51.2-32.914-18.286-113.371 40.229-98.743C182.857 460.8 274.286 508.343 358.4 585.143c157.257-190.172 358.4-340.114 588.8-435.2 62.171-25.6 106.057 58.514 51.2 95.086" fill="currentColor" fill-opacity="0.9"></path>
 </svg>"
diff --git a/src/packages/__VUE/rate/__tests__/rate.spec.tsx b/src/packages/__VUE/rate/__tests__/rate.spec.tsx
index 96db39a19d..8a07394410 100644
--- a/src/packages/__VUE/rate/__tests__/rate.spec.tsx
+++ b/src/packages/__VUE/rate/__tests__/rate.spec.tsx
@@ -1,21 +1,22 @@
 import { mount } from '@vue/test-utils';
-import Rate from '../index.vue';
-import { h, nextTick } from 'vue';
+import Rate from '..';
+import { h, nextTick, ref } from 'vue';
 import { Check } from '@nutui/icons-vue';
+import { triggerDrag } from '@/packages/utils/unit';
 
-test('base rate', () => {
+test('Icon: base rate', () => {
   const wrapper = mount(Rate);
   const rate = wrapper.find('.nut-rate');
   expect(rate.exists()).toBe(true);
 });
 
-test('should have rate when v-model', () => {
+test('Icon: should have rate when v-model', () => {
   const wrapper = mount(Rate, { props: { modelValue: 4 } });
   const rate = wrapper.findAll('.nut-rate-item__icon--disabled');
   expect(rate.length).toBe(1);
 });
 
-test('should have the same count and activeColor', () => {
+test('Icon: should have the same count and active-color', () => {
   const wrapper = mount(Rate, {
     props: { count: 10, activeColor: 'green', modelValue: 1 }
   });
@@ -27,7 +28,7 @@ test('should have the same count and activeColor', () => {
   expect((i[1].element as HTMLElement).style.color).toBe('');
 });
 
-test('should have click', async () => {
+test('Icon: should have click', async () => {
   const wrapper = mount(Rate, {
     props: {
       modelValue: 1,
@@ -42,7 +43,7 @@ test('should have click', async () => {
   expect((wrapper.emitted('change') as any)[0][0]).toEqual(3);
 });
 
-test('should have disabled', async () => {
+test('Icon: should have disabled', async () => {
   const wrapper = mount(Rate, {
     props: {
       disabled: true,
@@ -57,7 +58,7 @@ test('should have disabled', async () => {
   expect(rateDis.length).toBe(5);
 });
 
-test('should have readonly', async () => {
+test('Icon: should have readonly', async () => {
   const wrapper = mount(Rate, { props: { readonly: true, modelValue: 4 } });
   const rate = wrapper.findAll('.nut-rate-item');
   rate[1].trigger('click');
@@ -66,7 +67,7 @@ test('should have readonly', async () => {
   expect(rateDis.length).toBe(1);
 });
 
-test('custom icon', async () => {
+test('Icon: custom icon', async () => {
   const wrapper = mount(Rate, {
     props: {
       customIcon: h(Check)
@@ -75,3 +76,34 @@ test('custom icon', async () => {
   const icon = wrapper.find('.nut-icon');
   expect(icon.html()).toMatchSnapshot();
 });
+
+test('Icon: allow-half', async () => {
+  const val = ref(1.5);
+  const fn = vi.fn();
+  const wrapper = mount(() => {
+    return <Rate v-model={val.value} allowHalf onChange={fn} />;
+  });
+  const halfIcons = wrapper.findAll('.nut-rate-item__icon--half .nut-rate-item__icon');
+  expect(halfIcons.length).toBe(5);
+  halfIcons[3].trigger('click');
+  await nextTick();
+  expect(fn).toBeCalledWith(3.5);
+  expect(val.value).toBe(3.5);
+});
+
+test('Icon: touchable', async () => {
+  const val = ref(1);
+  const fn = vi.fn();
+  const wrapper = mount(() => {
+    return <Rate v-model={val.value} touchable onChange={fn} />;
+  });
+  const rate = wrapper.find('.nut-rate');
+
+  triggerDrag(rate, 20, 0);
+  await nextTick();
+  expect(val.value).toBe(5);
+
+  triggerDrag(rate, -20, 0);
+  await nextTick();
+  expect(val.value).toBe(0);
+});
diff --git a/src/packages/__VUE/rate/doc.en-US.md b/src/packages/__VUE/rate/doc.en-US.md
index fe181b2ec2..b440337ebe 100644
--- a/src/packages/__VUE/rate/doc.en-US.md
+++ b/src/packages/__VUE/rate/doc.en-US.md
@@ -74,6 +74,17 @@ app.use(Rate);
 | --- | --- | --- |
 | change | An event that fires whenever the current score is modified | val |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  RateProps,
+  RateInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/rate/doc.md b/src/packages/__VUE/rate/doc.md
index 8ba4912ee3..354d805003 100644
--- a/src/packages/__VUE/rate/doc.md
+++ b/src/packages/__VUE/rate/doc.md
@@ -74,6 +74,17 @@ app.use(Rate);
 | --- | --- | --- |
 | change | 当前分值修改时时触发的事件 | 当前值 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  RateProps,
+  RateInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/rate/doc.taro.md b/src/packages/__VUE/rate/doc.taro.md
index 0a4f2a4f2f..86dd9dc1bf 100644
--- a/src/packages/__VUE/rate/doc.taro.md
+++ b/src/packages/__VUE/rate/doc.taro.md
@@ -73,6 +73,17 @@ app.use(Rate);
 | --- | --- | --- |
 | change | 当前分值修改时时触发的事件 | 当前值 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  RateProps,
+  RateInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/rate/index.taro.ts b/src/packages/__VUE/rate/index.taro.ts
new file mode 100644
index 0000000000..57548bb77a
--- /dev/null
+++ b/src/packages/__VUE/rate/index.taro.ts
@@ -0,0 +1,11 @@
+import Rate from './rate.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Rate);
+
+export type { RateProps } from './rate.taro.vue';
+
+export type RateInstance = ComponentPublicInstance & InstanceType<typeof Rate>;
+
+export { Rate, Rate as default };
diff --git a/src/packages/__VUE/rate/index.ts b/src/packages/__VUE/rate/index.ts
new file mode 100644
index 0000000000..4149af7f35
--- /dev/null
+++ b/src/packages/__VUE/rate/index.ts
@@ -0,0 +1,11 @@
+import Rate from './rate.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Rate);
+
+export type { RateProps } from './rate.vue';
+
+export type RateInstance = ComponentPublicInstance & InstanceType<typeof Rate>;
+
+export { Rate, Rate as default };
diff --git a/src/packages/__VUE/rate/index.vue b/src/packages/__VUE/rate/index.vue
deleted file mode 100644
index 6e7ff8c044..0000000000
--- a/src/packages/__VUE/rate/index.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-  <view class="nut-rate" @touchstart="onTouchStart" @touchmove="onTouchMove">
-    <view
-      v-for="n in Number(count)"
-      :id="'rateRefs-' + refRandomId + n"
-      :key="n"
-      ref="rateRefs"
-      class="nut-rate-item"
-      :style="n < Number(count) ? { marginRight: pxCheck(spacing) } : {}"
-    >
-      <view class="nut-rate-item__icon--full">
-        <component
-          :is="
-            renderIcon(customIcon, {
-              width: size,
-              height: size,
-              size,
-              color: n <= Number(modelValue) ? activeColor : voidColor
-            })
-          "
-          class="nut-rate-item__icon"
-          :class="{ 'nut-rate-item__icon--disabled': disabled || n > Number(modelValue) }"
-          @click="onClick(1, n)"
-        ></component>
-      </view>
-      <view v-if="allowHalf && Number(modelValue) + 1 > n" class="nut-rate-item__icon--half">
-        <component
-          :is="
-            renderIcon(customIcon, {
-              width: size,
-              height: size,
-              size,
-              color: n <= Number(modelValue) + 1 ? activeColor : voidColor
-            })
-          "
-          class="nut-rate-item__icon"
-          @click="onClick(2, n)"
-        ></component>
-      </view>
-      <view v-else-if="allowHalf && Number(modelValue) + 1 < n" class="nut-rate-item__icon--half">
-        <component
-          :is="renderIcon(customIcon, { width: size, height: size, size, color: voidColor })"
-          class="nut-rate-item__icon nut-rate-item__icon--disabled"
-          @click="onClick(2, n)"
-        ></component>
-      </view>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-import { Ref, ref, toRef } from 'vue';
-import { StarFillN } from '@nutui/icons-vue';
-import { createComponent, renderIcon } from '@/packages/utils/create';
-import { pxCheck } from '@/packages/utils/pxCheck';
-import { useTouch } from '@/packages/utils/useTouch';
-import { useFormDisabled } from '../form/common';
-const { create } = createComponent('rate');
-export default create({
-  props: {
-    count: {
-      type: [String, Number],
-      default: 5
-    },
-    modelValue: {
-      type: [String, Number],
-      default: 0
-    },
-    customIcon: {
-      type: Object,
-      default: () => {
-        return StarFillN;
-      }
-    },
-    size: {
-      type: [String, Number],
-      default: undefined
-    },
-    activeColor: {
-      type: String,
-      default: ''
-    },
-    voidColor: {
-      type: String,
-      default: ''
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    allowHalf: {
-      type: Boolean,
-      default: false
-    },
-    touchable: {
-      type: Boolean,
-      default: true
-    },
-    spacing: {
-      type: [String, Number],
-      default: undefined
-    }
-  },
-  components: { StarFillN },
-  emits: ['update:modelValue', 'change'],
-  setup(props, { emit, slots }) {
-    const disabled = useFormDisabled(toRef(props, 'disabled'));
-    const rateRefs = ref<HTMLElement[]>([]);
-    const updateVal = (value: number) => {
-      emit('update:modelValue', value);
-      emit('change', value);
-    };
-    const onClick = (e: number, index: number) => {
-      if (disabled.value || props.readonly) return;
-      let value = 0;
-      if (index === 1 && props.modelValue === index) {
-        value = 0;
-      } else {
-        value = index;
-        if (props.allowHalf && e == 2) {
-          value -= 0.5;
-        }
-      }
-      updateVal(value);
-    };
-    const getScoreByPosition = (x: number, rateRefs: Ref<HTMLElement[]>, allowHalf: boolean) => {
-      let v = 0;
-      for (let index = rateRefs.value.length - 1; index >= 0; index--) {
-        const item = rateRefs.value[index];
-        if (x > item.offsetLeft) {
-          if (allowHalf) {
-            v = index + (x > item.offsetLeft + item.clientWidth / 2 ? 1 : 0.5);
-          } else {
-            v = index + 1;
-          }
-          break;
-        }
-      }
-      return v;
-    };
-    const touch = useTouch();
-    const touchMethods = {
-      onTouchStart(event: TouchEvent) {
-        if (!props.touchable || props.readonly) return;
-        touch.start(event);
-      },
-      onTouchMove(event: TouchEvent) {
-        if (!props.touchable) return;
-        touch.move(event);
-        if (touch.isHorizontal()) {
-          if (rateRefs.value) {
-            event.preventDefault();
-            updateVal(getScoreByPosition(touch.moveX.value, rateRefs, props.allowHalf));
-          }
-        }
-      }
-    };
-    const refRandomId = Math.random().toString(36).slice(-8);
-    return {
-      ...touchMethods,
-      onClick,
-      pxCheck,
-      rateRefs,
-      refRandomId,
-      renderIcon,
-      slots,
-      disabled
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/rate/index.taro.vue b/src/packages/__VUE/rate/rate.taro.vue
similarity index 50%
rename from src/packages/__VUE/rate/index.taro.vue
rename to src/packages/__VUE/rate/rate.taro.vue
index ecb870fee1..6356971ae5 100644
--- a/src/packages/__VUE/rate/index.taro.vue
+++ b/src/packages/__VUE/rate/rate.taro.vue
@@ -47,90 +47,61 @@
     </view>
   </view>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { ref, toRef } from 'vue';
 import { StarFillN } from '@nutui/icons-vue-taro';
-import { createComponent, renderIcon } from '@/packages/utils/create';
+import { renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { useFormDisabled } from '../form/common';
-const { create } = createComponent('rate');
-export default create({
-  props: {
-    count: {
-      type: [String, Number],
-      default: 5
-    },
-    modelValue: {
-      type: [String, Number],
-      default: 0
-    },
-    customIcon: {
-      type: Object,
-      default: () => {
-        return StarFillN;
-      }
-    },
-    size: {
-      type: [String, Number],
-      default: undefined
-    },
-    activeColor: {
-      type: String,
-      default: ''
-    },
-    voidColor: {
-      type: String,
-      default: ''
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    allowHalf: {
-      type: Boolean,
-      default: false
-    },
-    spacing: {
-      type: [String, Number],
-      default: undefined
+
+defineOptions({
+  name: 'NutRate'
+});
+
+export type RateProps = Partial<{
+  count: string | number;
+  modelValue: string | number;
+  customIcon: any;
+  size: string | number;
+  activeColor: string;
+  voidColor: string;
+  readonly: boolean;
+  disabled: boolean;
+  allowHalf: boolean;
+  spacing: string | number;
+}>;
+
+const props = withDefaults(defineProps<RateProps>(), {
+  count: 5,
+  modelValue: 0,
+  customIcon: () => StarFillN,
+  activeColor: '',
+  voidColor: '',
+  readonly: false,
+  disabled: false,
+  allowHalf: false
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const refRandomId = Math.random().toString(36).slice(-8);
+const disabled = useFormDisabled(toRef(props, 'disabled'));
+const rateRefs = ref<HTMLElement[]>([]);
+const updateVal = (value: number) => {
+  emit('update:modelValue', value);
+  emit('change', value);
+};
+const onClick = (e: number, index: number) => {
+  if (disabled.value || props.readonly) return;
+  let value = 0;
+  if (index === 1 && props.modelValue === index) {
+    value = 0;
+  } else {
+    value = index;
+    if (props.allowHalf && e == 2) {
+      value -= 0.5;
     }
-  },
-  components: { StarFillN },
-  emits: ['update:modelValue', 'change'],
-  setup(props, { emit, slots }) {
-    const disabled = useFormDisabled(toRef(props, 'disabled'));
-    const rateRefs = ref<HTMLElement[]>([]);
-    const updateVal = (value: number) => {
-      emit('update:modelValue', value);
-      emit('change', value);
-    };
-    const onClick = (e: number, index: number) => {
-      if (disabled.value || props.readonly) return;
-      let value = 0;
-      if (index === 1 && props.modelValue === index) {
-        value = 0;
-      } else {
-        value = index;
-        if (props.allowHalf && e == 2) {
-          value -= 0.5;
-        }
-      }
-      updateVal(value);
-    };
-    const refRandomId = Math.random().toString(36).slice(-8);
-    return {
-      onClick,
-      pxCheck,
-      rateRefs,
-      refRandomId,
-      renderIcon,
-      slots,
-      disabled
-    };
   }
-});
+  updateVal(value);
+};
 </script>
diff --git a/src/packages/__VUE/rate/rate.vue b/src/packages/__VUE/rate/rate.vue
new file mode 100644
index 0000000000..1b10f77338
--- /dev/null
+++ b/src/packages/__VUE/rate/rate.vue
@@ -0,0 +1,140 @@
+<template>
+  <view class="nut-rate" @touchstart="onTouchStart" @touchmove="onTouchMove">
+    <view
+      v-for="n in Number(count)"
+      :id="'rateRefs-' + refRandomId + n"
+      :key="n"
+      ref="rateRefs"
+      class="nut-rate-item"
+      :style="n < Number(count) ? { marginRight: pxCheck(spacing) } : {}"
+    >
+      <view class="nut-rate-item__icon--full">
+        <component
+          :is="
+            renderIcon(customIcon, {
+              width: size,
+              height: size,
+              size,
+              color: n <= Number(modelValue) ? activeColor : voidColor
+            })
+          "
+          class="nut-rate-item__icon"
+          :class="{ 'nut-rate-item__icon--disabled': disabled || n > Number(modelValue) }"
+          @click="onClick(1, n)"
+        ></component>
+      </view>
+      <view v-if="allowHalf && Number(modelValue) + 1 > n" class="nut-rate-item__icon--half">
+        <component
+          :is="
+            renderIcon(customIcon, {
+              width: size,
+              height: size,
+              size,
+              color: n <= Number(modelValue) + 1 ? activeColor : voidColor
+            })
+          "
+          class="nut-rate-item__icon"
+          @click="onClick(2, n)"
+        ></component>
+      </view>
+      <view v-else-if="allowHalf && Number(modelValue) + 1 < n" class="nut-rate-item__icon--half">
+        <component
+          :is="renderIcon(customIcon, { width: size, height: size, size, color: voidColor })"
+          class="nut-rate-item__icon nut-rate-item__icon--disabled"
+          @click="onClick(2, n)"
+        ></component>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { Ref, ref, toRef } from 'vue';
+import { StarFillN } from '@nutui/icons-vue';
+import { renderIcon } from '@/packages/utils/create';
+import { pxCheck } from '@/packages/utils/pxCheck';
+import { useTouch } from '@/packages/utils/useTouch';
+import { useFormDisabled } from '../form/common';
+
+defineOptions({
+  name: 'NutRate'
+});
+
+export type RateProps = Partial<{
+  count: string | number;
+  modelValue: string | number;
+  customIcon: any;
+  size: string | number;
+  activeColor: string;
+  voidColor: string;
+  readonly: boolean;
+  disabled: boolean;
+  allowHalf: boolean;
+  touchable: boolean;
+  spacing: string | number;
+}>;
+
+const props = withDefaults(defineProps<RateProps>(), {
+  count: 5,
+  modelValue: 0,
+  customIcon: () => StarFillN,
+  activeColor: '',
+  voidColor: '',
+  readonly: false,
+  disabled: false,
+  allowHalf: false,
+  touchable: true
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const refRandomId = Math.random().toString(36).slice(-8);
+const disabled = useFormDisabled(toRef(props, 'disabled'));
+const rateRefs = ref<HTMLElement[]>([]);
+const updateVal = (value: number) => {
+  emit('update:modelValue', value);
+  emit('change', value);
+};
+const onClick = (e: number, index: number) => {
+  if (disabled.value || props.readonly) return;
+  let value = 0;
+  if (index === 1 && props.modelValue === index) {
+    value = 0;
+  } else {
+    value = index;
+    if (props.allowHalf && e == 2) {
+      value -= 0.5;
+    }
+  }
+  updateVal(value);
+};
+const getScoreByPosition = (x: number, rateRefs: Ref<HTMLElement[]>, allowHalf: boolean) => {
+  let v = 0;
+  for (let index = rateRefs.value.length - 1; index >= 0; index--) {
+    const item = rateRefs.value[index];
+    if (x > item.offsetLeft) {
+      if (allowHalf) {
+        v = index + (x > item.offsetLeft + item.clientWidth / 2 ? 1 : 0.5);
+      } else {
+        v = index + 1;
+      }
+      break;
+    }
+  }
+  return v;
+};
+const touch = useTouch();
+const onTouchStart = (event: TouchEvent) => {
+  if (!props.touchable || props.readonly) return;
+  touch.start(event);
+};
+const onTouchMove = (event: TouchEvent) => {
+  if (!props.touchable) return;
+  touch.move(event);
+  if (touch.isHorizontal()) {
+    if (rateRefs.value) {
+      event.preventDefault();
+      updateVal(getScoreByPosition(touch.moveX.value, rateRefs, props.allowHalf));
+    }
+  }
+};
+</script>