diff --git a/src/config.json b/src/config.json
index 82701af660..e2756f3c3d 100644
--- a/src/config.json
+++ b/src/config.json
@@ -781,6 +781,7 @@
           "cType": "展示组件",
           "cName": "趋势箭头",
           "desc": "带有箭头指示的百分比数字,用以展示指标趋势",
+          "setup": true,
           "author": "liukun"
         },
         {
diff --git a/src/packages/__VUE/trendarrow/doc.en-US.md b/src/packages/__VUE/trendarrow/doc.en-US.md
index bed5c3aabb..e8e3615d99 100644
--- a/src/packages/__VUE/trendarrow/doc.en-US.md
+++ b/src/packages/__VUE/trendarrow/doc.en-US.md
@@ -65,6 +65,14 @@ app.use(TrendArrow);
 | up-icon | custom up icon |
 | down-icon | custom down icon |
 
+### Types version
+
+The component exports the following type definitions:
+
+```ts
+import type { TrendArrowProps, TrendArrowInstance } from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/trendarrow/doc.md b/src/packages/__VUE/trendarrow/doc.md
index 278a5249c2..bff9faa42e 100644
--- a/src/packages/__VUE/trendarrow/doc.md
+++ b/src/packages/__VUE/trendarrow/doc.md
@@ -65,6 +65,14 @@ app.use(TrendArrow);
 | up-icon | 自定义向上箭头图标，默认使用 `TriangleUp` |
 | down-icon | 自定义向下箭头图标，默认使用 `TriangleDown` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type { TrendArrowProps, TrendArrowInstance } from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/trendarrow/doc.taro.md b/src/packages/__VUE/trendarrow/doc.taro.md
index 12e85635c0..f534d501f2 100644
--- a/src/packages/__VUE/trendarrow/doc.taro.md
+++ b/src/packages/__VUE/trendarrow/doc.taro.md
@@ -65,6 +65,14 @@ app.use(TrendArrow);
 | up-icon | 自定义向上箭头图标，默认使用 `TriangleUp` |
 | down-icon | 自定义向下箭头图标，默认使用 `TriangleDown` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type { TrendArrowProps, TrendArrowInstance } from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/trendarrow/index.taro.ts b/src/packages/__VUE/trendarrow/index.taro.ts
new file mode 100644
index 0000000000..9a7f29397e
--- /dev/null
+++ b/src/packages/__VUE/trendarrow/index.taro.ts
@@ -0,0 +1,11 @@
+import TrendArrow from './trend-arrow.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(TrendArrow);
+
+export type { TrendArrowProps } from './trend-arrow.taro.vue';
+
+export type TrendArrowInstance = ComponentPublicInstance & InstanceType<typeof TrendArrow>;
+
+export { TrendArrow, TrendArrow as default };
diff --git a/src/packages/__VUE/trendarrow/index.taro.vue b/src/packages/__VUE/trendarrow/index.taro.vue
deleted file mode 100644
index 0843a4b242..0000000000
--- a/src/packages/__VUE/trendarrow/index.taro.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <view class="nut-trend-arrow">
-    <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
-      calcRate
-    }}</span>
-    <slot v-if="Number(rate) !== 0 && rateTrend" name="up-icon">
-      <TriangleUp :color="riseColor" />
-    </slot>
-    <slot v-if="Number(rate) !== 0 && !rateTrend" name="down-icon">
-      <TriangleDown :color="dropColor" />
-    </slot>
-    <span v-if="arrowLeft" class="nut-trend-arrow-icon-after nut-trend-arrow-rate" :style="calcStyle">{{
-      calcRate
-    }}</span>
-  </view>
-</template>
-<script lang="ts">
-import { reactive, toRefs, computed } from 'vue';
-import { myFixed } from '@/packages/utils/util';
-import { createComponent } from '@/packages/utils/create';
-import { TriangleUp, TriangleDown } from '@nutui/icons-vue-taro';
-const { create } = createComponent('trend-arrow');
-
-export default create({
-  components: { TriangleUp, TriangleDown },
-  props: {
-    rate: {
-      type: Number,
-      default: 0
-    },
-    digits: {
-      type: Number,
-      default: 2
-    },
-    showSign: {
-      type: Boolean,
-      default: false
-    },
-    showZero: {
-      type: Boolean,
-      default: false
-    },
-    arrowLeft: {
-      type: Boolean,
-      default: false
-    },
-    syncTextColor: {
-      type: Boolean,
-      default: true
-    },
-    textColor: {
-      type: String,
-      default: '#333'
-    },
-    riseColor: {
-      type: String,
-      default: '#fa2c19'
-    },
-    dropColor: {
-      type: String,
-      default: '#64b578'
-    }
-  },
-  setup(props) {
-    const state = reactive({
-      rateTrend: props.rate > 0 ? true : false
-    });
-    const calcRate = computed(() => {
-      const { rate, digits, showSign, showZero } = props;
-      state.rateTrend = rate > 0 ? true : false;
-      const absRate = Math.abs(rate);
-      if (!showZero && rate === 0) {
-        return '--';
-      }
-      let resultRate = `${showSign && rate !== 0 ? (state.rateTrend ? '+' : '-') : ''}${myFixed(
-        Number(absRate),
-        digits
-      )}%`;
-
-      return resultRate;
-    });
-    const calcStyle = computed(() => {
-      const { dropColor, riseColor, syncTextColor, textColor, rate } = props;
-      let style = {
-        color: rate === 0 ? textColor : syncTextColor ? (state.rateTrend ? riseColor : dropColor) : textColor
-      };
-      return style;
-    });
-    return { ...toRefs(state), calcRate, calcStyle };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/trendarrow/index.ts b/src/packages/__VUE/trendarrow/index.ts
new file mode 100644
index 0000000000..20bee596f3
--- /dev/null
+++ b/src/packages/__VUE/trendarrow/index.ts
@@ -0,0 +1,11 @@
+import TrendArrow from './trend-arrow.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(TrendArrow);
+
+export type { TrendArrowProps } from './trend-arrow.vue';
+
+export type TrendArrowInstance = ComponentPublicInstance & InstanceType<typeof TrendArrow>;
+
+export { TrendArrow, TrendArrow as default };
diff --git a/src/packages/__VUE/trendarrow/index.vue b/src/packages/__VUE/trendarrow/index.vue
deleted file mode 100644
index b5197df2cc..0000000000
--- a/src/packages/__VUE/trendarrow/index.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <view class="nut-trend-arrow">
-    <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
-      calcRate
-    }}</span>
-    <slot v-if="Number(rate) !== 0 && rateTrend" name="up-icon">
-      <TriangleUp :color="riseColor" />
-    </slot>
-    <slot v-if="Number(rate) !== 0 && !rateTrend" name="down-icon">
-      <TriangleDown :color="dropColor" />
-    </slot>
-    <span v-if="arrowLeft" class="nut-trend-arrow-icon-after nut-trend-arrow-rate" :style="calcStyle">{{
-      calcRate
-    }}</span>
-  </view>
-</template>
-<script lang="ts">
-import { reactive, toRefs, computed } from 'vue';
-import { myFixed } from '@/packages/utils/util';
-import { createComponent } from '@/packages/utils/create';
-import { TriangleUp, TriangleDown } from '@nutui/icons-vue';
-const { create } = createComponent('trend-arrow');
-
-export default create({
-  components: { TriangleUp, TriangleDown },
-  props: {
-    rate: {
-      type: Number,
-      default: 0
-    },
-    digits: {
-      type: Number,
-      default: 2
-    },
-    showSign: {
-      type: Boolean,
-      default: false
-    },
-    showZero: {
-      type: Boolean,
-      default: false
-    },
-    arrowLeft: {
-      type: Boolean,
-      default: false
-    },
-    syncTextColor: {
-      type: Boolean,
-      default: true
-    },
-    textColor: {
-      type: String,
-      default: '#333'
-    },
-    riseColor: {
-      type: String,
-      default: '#fa2c19'
-    },
-    dropColor: {
-      type: String,
-      default: '#64b578'
-    }
-  },
-  setup(props) {
-    const state = reactive({
-      rateTrend: props.rate > 0 ? true : false
-    });
-    const calcRate = computed(() => {
-      const { rate, digits, showSign, showZero } = props;
-      state.rateTrend = rate > 0 ? true : false;
-      const absRate = Math.abs(rate);
-      if (!showZero && rate === 0) {
-        return '--';
-      }
-      let resultRate = `${showSign && rate !== 0 ? (state.rateTrend ? '+' : '-') : ''}${myFixed(
-        Number(absRate),
-        digits
-      )}%`;
-
-      return resultRate;
-    });
-    const calcStyle = computed(() => {
-      const { dropColor, riseColor, syncTextColor, textColor, rate } = props;
-      let style = {
-        color: rate === 0 ? textColor : syncTextColor ? (state.rateTrend ? riseColor : dropColor) : textColor
-      };
-      return style;
-    });
-    return { ...toRefs(state), calcRate, calcStyle };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/trendarrow/trend-arrow.taro.vue b/src/packages/__VUE/trendarrow/trend-arrow.taro.vue
new file mode 100644
index 0000000000..c2e0663188
--- /dev/null
+++ b/src/packages/__VUE/trendarrow/trend-arrow.taro.vue
@@ -0,0 +1,77 @@
+<template>
+  <view class="nut-trend-arrow">
+    <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
+      calcRate
+    }}</span>
+    <slot v-if="Number(rate) !== 0 && isPositive" name="up-icon">
+      <TriangleUp :color="riseColor" />
+    </slot>
+    <slot v-if="Number(rate) !== 0 && !isPositive" name="down-icon">
+      <TriangleDown :color="dropColor" />
+    </slot>
+    <span v-if="arrowLeft" class="nut-trend-arrow-icon-after nut-trend-arrow-rate" :style="calcStyle">{{
+      calcRate
+    }}</span>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { myFixed } from '@/packages/utils/util';
+import { TriangleUp, TriangleDown } from '@nutui/icons-vue-taro';
+
+defineOptions({
+  name: 'NutTrendArrow'
+});
+
+export type TrendArrowProps = Partial<{
+  rate: number;
+  digits: number;
+  showSign: boolean;
+  showZero: boolean;
+  arrowLeft: boolean;
+  syncTextColor: boolean;
+  textColor: string;
+  riseColor: string;
+  dropColor: string;
+}>;
+
+const props = withDefaults(defineProps<TrendArrowProps>(), {
+  rate: 0,
+  digits: 2,
+  showSign: false,
+  showZero: false,
+  arrowLeft: false,
+  syncTextColor: true,
+  textColor: '#333',
+  riseColor: '#fa2c19',
+  dropColor: '#64b578'
+});
+
+const isPositive = computed(() => {
+  return props.rate > 0 ? true : false;
+});
+const calcRate = computed(() => {
+  const absRate = Math.abs(props.rate);
+  if (!props.showZero && props.rate === 0) {
+    return '--';
+  }
+  let resultRate = `${props.showSign && props.rate !== 0 ? (isPositive.value ? '+' : '-') : ''}${myFixed(
+    Number(absRate),
+    props.digits
+  )}%`;
+
+  return resultRate;
+});
+const calcStyle = computed(() => {
+  return {
+    color:
+      props.rate === 0
+        ? props.textColor
+        : props.syncTextColor
+          ? isPositive.value
+            ? props.riseColor
+            : props.dropColor
+          : props.textColor
+  };
+});
+</script>
diff --git a/src/packages/__VUE/trendarrow/trend-arrow.vue b/src/packages/__VUE/trendarrow/trend-arrow.vue
new file mode 100644
index 0000000000..f8c0e57164
--- /dev/null
+++ b/src/packages/__VUE/trendarrow/trend-arrow.vue
@@ -0,0 +1,77 @@
+<template>
+  <view class="nut-trend-arrow">
+    <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
+      calcRate
+    }}</span>
+    <slot v-if="Number(rate) !== 0 && isPositive" name="up-icon">
+      <TriangleUp :color="riseColor" />
+    </slot>
+    <slot v-if="Number(rate) !== 0 && !isPositive" name="down-icon">
+      <TriangleDown :color="dropColor" />
+    </slot>
+    <span v-if="arrowLeft" class="nut-trend-arrow-icon-after nut-trend-arrow-rate" :style="calcStyle">{{
+      calcRate
+    }}</span>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { myFixed } from '@/packages/utils/util';
+import { TriangleUp, TriangleDown } from '@nutui/icons-vue';
+
+defineOptions({
+  name: 'NutTrendArrow'
+});
+
+export type TrendArrowProps = Partial<{
+  rate: number;
+  digits: number;
+  showSign: boolean;
+  showZero: boolean;
+  arrowLeft: boolean;
+  syncTextColor: boolean;
+  textColor: string;
+  riseColor: string;
+  dropColor: string;
+}>;
+
+const props = withDefaults(defineProps<TrendArrowProps>(), {
+  rate: 0,
+  digits: 2,
+  showSign: false,
+  showZero: false,
+  arrowLeft: false,
+  syncTextColor: true,
+  textColor: '#333',
+  riseColor: '#fa2c19',
+  dropColor: '#64b578'
+});
+
+const isPositive = computed(() => {
+  return props.rate > 0 ? true : false;
+});
+const calcRate = computed(() => {
+  const absRate = Math.abs(props.rate);
+  if (!props.showZero && props.rate === 0) {
+    return '--';
+  }
+  let resultRate = `${props.showSign && props.rate !== 0 ? (isPositive.value ? '+' : '-') : ''}${myFixed(
+    Number(absRate),
+    props.digits
+  )}%`;
+
+  return resultRate;
+});
+const calcStyle = computed(() => {
+  return {
+    color:
+      props.rate === 0
+        ? props.textColor
+        : props.syncTextColor
+          ? isPositive.value
+            ? props.riseColor
+            : props.dropColor
+          : props.textColor
+  };
+});
+</script>