diff --git a/src/config.json b/src/config.json
index fffc789d91..23ceb815f1 100644
--- a/src/config.json
+++ b/src/config.json
@@ -600,6 +600,7 @@
           "name": "Progress",
           "cName": "进度条",
           "desc": "用来展示进度",
+          "setup": true,
           "author": "Drjingubo"
         },
         {
diff --git a/src/packages/__VUE/progress/__tests__/index.spec.ts b/src/packages/__VUE/progress/__tests__/index.spec.ts
index 2938068523..0f7d7680ed 100644
--- a/src/packages/__VUE/progress/__tests__/index.spec.ts
+++ b/src/packages/__VUE/progress/__tests__/index.spec.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import Progress from '../index.vue';
+import Progress from '../';
 
 test('should render progress when use props', async () => {
   const wrapper = mount(Progress, {
diff --git a/src/packages/__VUE/progress/doc.en-US.md b/src/packages/__VUE/progress/doc.en-US.md
index 1a4106e68d..29b0866c2d 100644
--- a/src/packages/__VUE/progress/doc.en-US.md
+++ b/src/packages/__VUE/progress/doc.en-US.md
@@ -71,6 +71,19 @@ size: `small`, `base`, `large` .
 | --- | --- |
 | icon-name | Right icon content |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  ProgressSize,
+  ProgressStatus,
+  ProgressProps,
+  ProgressInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/progress/doc.md b/src/packages/__VUE/progress/doc.md
index 3157ac78a0..c547d64be4 100644
--- a/src/packages/__VUE/progress/doc.md
+++ b/src/packages/__VUE/progress/doc.md
@@ -71,6 +71,19 @@ size: `small`, `base`, `large`
 | --- | --- | --- |
 | icon-name | 右侧 `icon` 内容 | - |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  ProgressSize,
+  ProgressStatus,
+  ProgressProps,
+  ProgressInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/progress/doc.taro.md b/src/packages/__VUE/progress/doc.taro.md
index 1a73e9423a..b0b565ae74 100644
--- a/src/packages/__VUE/progress/doc.taro.md
+++ b/src/packages/__VUE/progress/doc.taro.md
@@ -71,6 +71,19 @@ size: `small`, `base`, `large`
 | --- | --- | --- |
 | icon-name | 右侧 `icon` 内容 | - |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  ProgressSize,
+  ProgressStatus,
+  ProgressProps,
+  ProgressInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/progress/index.taro.ts b/src/packages/__VUE/progress/index.taro.ts
new file mode 100644
index 0000000000..2b1f5357fb
--- /dev/null
+++ b/src/packages/__VUE/progress/index.taro.ts
@@ -0,0 +1,13 @@
+import Progress from './progress.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Progress);
+
+export type { ProgressProps } from './progress.taro.vue';
+
+export type { ProgressSize, ProgressStatus } from './types';
+
+export type ProgressInstance = ComponentPublicInstance & InstanceType<typeof Progress>;
+
+export { Progress, Progress as default };
diff --git a/src/packages/__VUE/progress/index.taro.vue b/src/packages/__VUE/progress/index.taro.vue
deleted file mode 100644
index db3668a1c1..0000000000
--- a/src/packages/__VUE/progress/index.taro.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <view class="nut-progress">
-    <div
-      class="nut-progress-outer"
-      :class="[showText && !textInside ? 'nut-progress-outer-part' : '', size ? 'nut-progress-' + size : '']"
-      :style="{ height: height }"
-    >
-      <div :class="['nut-progress-inner', status === 'active' ? 'nut-active' : '']" :style="bgStyle"></div>
-      <div
-        v-if="showText && textInside && !slotDefault"
-        class="nut-progress-text nut-progress-insidetext"
-        :style="{
-          lineHeight: height,
-          left: `${percentage}%`,
-          transform: `translate(-${+percentage}%,-50%)`,
-          background: textBackground || strokeColor
-        }"
-      >
-        <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
-      </div>
-      <div
-        v-if="showText && textInside && slotDefault"
-        class="nut-progress-slot"
-        :style="{
-          position: `absolute`,
-          top: `50%`,
-          left: `${percentage}%`,
-          transform: `translate(-${+percentage}%,-50%)`
-        }"
-      >
-        <slot></slot>
-      </div>
-    </div>
-    <div v-if="showText && !textInside" class="nut-progress-text" :style="{ lineHeight: height }">
-      <template v-if="status === 'text' || status === 'active'">
-        <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
-      </template>
-      <template v-else-if="status === 'icon'">
-        <slot name="icon-name">
-          <Checked width="15px" height="15px" color="#439422"></Checked>
-        </slot>
-      </template>
-    </div>
-  </view>
-</template>
-
-<script lang="ts">
-import { computed, useSlots, PropType } from 'vue';
-import { Checked } from '@nutui/icons-vue-taro';
-import type { ProgressSize, ProgressStatus } from './types';
-import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('progress');
-export default create({
-  components: { Checked },
-  props: {
-    percentage: {
-      type: [Number, String],
-      default: 0,
-      required: true
-    },
-    size: {
-      type: String as PropType<ProgressSize>,
-      default: 'base'
-    },
-    status: {
-      type: String as PropType<ProgressStatus>,
-      default: 'text'
-    },
-    strokeWidth: {
-      type: [Number, String],
-      default: ''
-    },
-    textInside: {
-      type: Boolean,
-      default: false
-    },
-    showText: {
-      type: Boolean,
-      default: true
-    },
-    strokeColor: {
-      type: String,
-      default: ''
-    },
-    textColor: {
-      type: String,
-      default: ''
-    },
-    textBackground: {
-      type: String,
-      default: ''
-    },
-    isShowPercentage: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup(props) {
-    const slotDefault = !!useSlots().default;
-    const height = computed(() => {
-      if (props.strokeWidth) {
-        return props.strokeWidth + 'px';
-      }
-      return undefined;
-    });
-    const percentage = computed(() => {
-      return Number(props.percentage) >= 100 ? 100 : Number(props.percentage);
-    });
-    const bgStyle = computed(() => {
-      return {
-        width: percentage.value + '%',
-        background: props.strokeColor || ''
-      };
-    });
-    const textStyle = computed(() => {
-      return {
-        color: props.textColor || ''
-      };
-    });
-    return {
-      height,
-      percentage,
-      bgStyle,
-      textStyle,
-      slotDefault
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/progress/index.ts b/src/packages/__VUE/progress/index.ts
new file mode 100644
index 0000000000..e5ec88dea2
--- /dev/null
+++ b/src/packages/__VUE/progress/index.ts
@@ -0,0 +1,13 @@
+import Progress from './progress.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Progress);
+
+export type { ProgressProps } from './progress.vue';
+
+export type { ProgressSize, ProgressStatus } from './types';
+
+export type ProgressInstance = ComponentPublicInstance & InstanceType<typeof Progress>;
+
+export { Progress, Progress as default };
diff --git a/src/packages/__VUE/progress/index.vue b/src/packages/__VUE/progress/index.vue
deleted file mode 100644
index 759e49c79b..0000000000
--- a/src/packages/__VUE/progress/index.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <div class="nut-progress">
-    <div
-      class="nut-progress-outer"
-      :class="[showText && !textInside ? 'nut-progress-outer-part' : '', size ? 'nut-progress-' + size : '']"
-      :style="{ height: height }"
-    >
-      <div :class="['nut-progress-inner', status === 'active' ? 'nut-active' : '']" :style="bgStyle"></div>
-      <div
-        v-if="showText && textInside && !slotDefault"
-        class="nut-progress-text nut-progress-insidetext"
-        :style="{
-          lineHeight: height,
-          left: `${percentage}%`,
-          transform: `translate(-${+percentage}%,-50%)`,
-          background: textBackground || strokeColor
-        }"
-      >
-        <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
-      </div>
-      <div
-        v-if="showText && textInside && slotDefault"
-        class="nut-progress-slot"
-        :style="{
-          position: `absolute`,
-          top: `50%`,
-          left: `${percentage}%`,
-          transform: `translate(-${+percentage}%,-50%)`
-        }"
-      >
-        <slot></slot>
-      </div>
-    </div>
-    <div v-if="showText && !textInside" class="nut-progress-text" :style="{ lineHeight: height }">
-      <template v-if="status === 'text' || status === 'active'">
-        <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
-      </template>
-      <template v-else-if="status === 'icon'">
-        <slot name="icon-name">
-          <Checked width="15px" height="15px" color="#439422"></Checked>
-        </slot>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, useSlots, PropType } from 'vue';
-import { Checked } from '@nutui/icons-vue';
-import type { ProgressSize, ProgressStatus } from './types';
-import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('progress');
-export default create({
-  components: { Checked },
-  props: {
-    percentage: {
-      type: [Number, String],
-      default: 0,
-      required: true
-    },
-    size: {
-      type: String as PropType<ProgressSize>,
-      default: 'base'
-    },
-    status: {
-      type: String as PropType<ProgressStatus>,
-      default: 'text'
-    },
-    strokeWidth: {
-      type: [Number, String],
-      default: ''
-    },
-    textInside: {
-      type: Boolean,
-      default: false
-    },
-    showText: {
-      type: Boolean,
-      default: true
-    },
-    strokeColor: {
-      type: String,
-      default: ''
-    },
-    textColor: {
-      type: String,
-      default: ''
-    },
-    textBackground: {
-      type: String,
-      default: ''
-    },
-    isShowPercentage: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup(props) {
-    const slotDefault = !!useSlots().default;
-    const height = computed(() => {
-      if (props.strokeWidth) {
-        return props.strokeWidth + 'px';
-      }
-      return undefined;
-    });
-    const percentage = computed(() => {
-      return Number(props.percentage) >= 100 ? 100 : Number(props.percentage);
-    });
-    const bgStyle = computed(() => {
-      return {
-        width: percentage.value + '%',
-        background: props.strokeColor || ''
-      };
-    });
-    const textStyle = computed(() => {
-      return {
-        color: props.textColor || ''
-      };
-    });
-    return {
-      height,
-      percentage,
-      bgStyle,
-      textStyle,
-      slotDefault
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/progress/progress.taro.vue b/src/packages/__VUE/progress/progress.taro.vue
new file mode 100644
index 0000000000..79d77566ca
--- /dev/null
+++ b/src/packages/__VUE/progress/progress.taro.vue
@@ -0,0 +1,98 @@
+<template>
+  <view class="nut-progress">
+    <div
+      class="nut-progress-outer"
+      :class="[showText && !textInside ? 'nut-progress-outer-part' : '', size ? 'nut-progress-' + size : '']"
+      :style="{ height: height }"
+    >
+      <div :class="['nut-progress-inner', status === 'active' ? 'nut-active' : '']" :style="bgStyle"></div>
+      <div
+        v-if="showText && textInside && !$slots.default"
+        class="nut-progress-text nut-progress-insidetext"
+        :style="{
+          lineHeight: height,
+          left: `${percentage}%`,
+          transform: `translate(-${+percentage}%,-50%)`,
+          background: textBackground || strokeColor
+        }"
+      >
+        <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
+      </div>
+      <div
+        v-if="showText && textInside && $slots.default"
+        class="nut-progress-slot"
+        :style="{
+          position: `absolute`,
+          top: `50%`,
+          left: `${percentage}%`,
+          transform: `translate(-${+percentage}%,-50%)`
+        }"
+      >
+        <slot></slot>
+      </div>
+    </div>
+    <div v-if="showText && !textInside" class="nut-progress-text" :style="{ lineHeight: height }">
+      <template v-if="status === 'text' || status === 'active'">
+        <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
+      </template>
+      <template v-else-if="status === 'icon'">
+        <slot name="icon-name">
+          <Checked width="15px" height="15px" color="#439422"></Checked>
+        </slot>
+      </template>
+    </div>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Checked } from '@nutui/icons-vue-taro';
+import type { ProgressSize, ProgressStatus } from './types';
+
+defineOptions({
+  name: 'NutProgress'
+});
+
+export type ProgressProps = Partial<{
+  percentage: string | number;
+  size: ProgressSize;
+  status: ProgressStatus;
+  strokeWidth: string | number;
+  textInside: boolean;
+  showText: boolean;
+  strokeColor: string;
+  textColor: string;
+  textBackground: string;
+  isShowPercentage: boolean;
+}>;
+
+const props = withDefaults(defineProps<ProgressProps>(), {
+  percentage: 0,
+  size: 'base',
+  status: 'text',
+  textInside: false,
+  showText: true,
+  isShowPercentage: true
+});
+
+const height = computed(() => {
+  if (props.strokeWidth) {
+    return props.strokeWidth + 'px';
+  }
+  return undefined;
+});
+const percentage = computed(() => {
+  return Number(props.percentage) >= 100 ? 100 : Number(props.percentage);
+});
+const bgStyle = computed(() => {
+  return {
+    width: percentage.value + '%',
+    background: props.strokeColor || ''
+  };
+});
+const textStyle = computed(() => {
+  return {
+    color: props.textColor || ''
+  };
+});
+</script>
diff --git a/src/packages/__VUE/progress/progress.vue b/src/packages/__VUE/progress/progress.vue
new file mode 100644
index 0000000000..c6f37a2d71
--- /dev/null
+++ b/src/packages/__VUE/progress/progress.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="nut-progress">
+    <div
+      class="nut-progress-outer"
+      :class="[showText && !textInside ? 'nut-progress-outer-part' : '', size ? 'nut-progress-' + size : '']"
+      :style="{ height: height }"
+    >
+      <div :class="['nut-progress-inner', status === 'active' ? 'nut-active' : '']" :style="bgStyle"></div>
+      <div
+        v-if="showText && textInside && !$slots.default"
+        class="nut-progress-text nut-progress-insidetext"
+        :style="{
+          lineHeight: height,
+          left: `${percentage}%`,
+          transform: `translate(-${+percentage}%,-50%)`,
+          background: textBackground || strokeColor
+        }"
+      >
+        <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
+      </div>
+      <div
+        v-if="showText && textInside && $slots.default"
+        class="nut-progress-slot"
+        :style="{
+          position: `absolute`,
+          top: `50%`,
+          left: `${percentage}%`,
+          transform: `translate(-${+percentage}%,-50%)`
+        }"
+      >
+        <slot></slot>
+      </div>
+    </div>
+    <div v-if="showText && !textInside" class="nut-progress-text" :style="{ lineHeight: height }">
+      <template v-if="status === 'text' || status === 'active'">
+        <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
+      </template>
+      <template v-else-if="status === 'icon'">
+        <slot name="icon-name">
+          <Checked width="15px" height="15px" color="#439422"></Checked>
+        </slot>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Checked } from '@nutui/icons-vue';
+import type { ProgressSize, ProgressStatus } from './types';
+
+defineOptions({
+  name: 'NutProgress'
+});
+
+export type ProgressProps = Partial<{
+  percentage: string | number;
+  size: ProgressSize;
+  status: ProgressStatus;
+  strokeWidth: string | number;
+  textInside: boolean;
+  showText: boolean;
+  strokeColor: string;
+  textColor: string;
+  textBackground: string;
+  isShowPercentage: boolean;
+}>;
+
+const props = withDefaults(defineProps<ProgressProps>(), {
+  percentage: 0,
+  size: 'base',
+  status: 'text',
+  textInside: false,
+  showText: true,
+  isShowPercentage: true
+});
+
+const height = computed(() => {
+  if (props.strokeWidth) {
+    return props.strokeWidth + 'px';
+  }
+  return undefined;
+});
+const percentage = computed(() => {
+  return Number(props.percentage) >= 100 ? 100 : Number(props.percentage);
+});
+const bgStyle = computed(() => {
+  return {
+    width: percentage.value + '%',
+    background: props.strokeColor || ''
+  };
+});
+const textStyle = computed(() => {
+  return {
+    color: props.textColor || ''
+  };
+});
+</script>
diff --git a/src/packages/__VUE/uploader/index.taro.vue b/src/packages/__VUE/uploader/index.taro.vue
index 52c5041174..03db791297 100644
--- a/src/packages/__VUE/uploader/index.taro.vue
+++ b/src/packages/__VUE/uploader/index.taro.vue
@@ -76,7 +76,7 @@ import { createComponent } from '@/packages/utils/create';
 import { UploaderTaro, UploadOptions } from './uploader';
 import { FileItem, MediaType, SizeType, SourceType } from './type';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
-import NutProgress from '../progress/index.taro.vue';
+import NutProgress from '../progress/index.taro';
 import NutButton from '../button/index.taro';
 import Taro from '@tarojs/taro';
 import { Photograph, Failure, Loading, Del, Link } from '@nutui/icons-vue-taro';
diff --git a/src/packages/__VUE/uploader/index.vue b/src/packages/__VUE/uploader/index.vue
index 327e417d59..faf96c348f 100644
--- a/src/packages/__VUE/uploader/index.vue
+++ b/src/packages/__VUE/uploader/index.vue
@@ -76,7 +76,7 @@ import { createComponent } from '@/packages/utils/create';
 import { Uploader, UploadOptions } from './uploader';
 import { FileItem } from './type';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
-import NutProgress from '../progress/index.vue';
+import NutProgress from '../progress';
 import { Photograph, Failure, Loading, Del, Link } from '@nutui/icons-vue';
 import { useLocale } from '@/packages/utils/useLocale';
 import { useFormDisabled } from '../form/common';