diff --git a/src/config.json b/src/config.json
index 8d8845d88e..f8c5368df1 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1082,6 +1082,7 @@
           "cName": "折叠面板",
           "type": "component",
           "show": true,
+          "setup": true,
           "desc": "折叠面板",
           "author": "Ymm0008"
         },
@@ -1095,6 +1096,7 @@
           "show": false,
           "exportEmpty": true,
           "exportEmptyTaro": true,
+          "setup": true,
           "desc": "折叠面板-item",
           "author": "Ymm0008"
         },
diff --git a/src/packages/__VUE/collapse/__tests__/collapse.spec.tsx b/src/packages/__VUE/collapse/__tests__/collapse.spec.tsx
index f23e9426a9..170c92bfff 100644
--- a/src/packages/__VUE/collapse/__tests__/collapse.spec.tsx
+++ b/src/packages/__VUE/collapse/__tests__/collapse.spec.tsx
@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { Heart } from '@nutui/icons-vue';
-import Collapse from '../index.vue';
-import CollapseItem from '../../collapseitem/index.vue';
+import Collapse from '../';
+import CollapseItem from '../../collapseitem';
 
 test('Collapse: should props active', async () => {
   const wrapper = mount(() => {
@@ -131,10 +131,17 @@ test('Collapse: v-model is undefined', async () => {
   const collapseTitles = wrapper.findAll('.nut-collapse-item__title');
   expect(collapseTitles.length).toBe(2);
   collapseTitles[1].trigger('click');
-  expect(onChange).toBeCalledWith([222222], 222222, true);
+  expect(onChange).toBeCalledTimes(1);
+  expect(onChange).toHaveBeenLastCalledWith([222222], 222222, true);
 
   // collapse-item can expand
   const items = wrapper.findAllComponents(CollapseItem);
+  // @ts-ignore
   expect(items[0].vm.expanded).toBe(false);
+  // @ts-ignore
   expect(items[1].vm.expanded).toBe(true);
+
+  collapseTitles[1].trigger('click');
+  expect(onChange).toBeCalledTimes(2);
+  expect(onChange).toHaveBeenLastCalledWith([], 222222, false);
 });
diff --git a/src/packages/__VUE/collapse/collapse.taro.vue b/src/packages/__VUE/collapse/collapse.taro.vue
new file mode 100644
index 0000000000..6c2f25dd00
--- /dev/null
+++ b/src/packages/__VUE/collapse/collapse.taro.vue
@@ -0,0 +1,76 @@
+<template>
+  <view class="nut-collapse">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { provide, ref, watch } from 'vue';
+import { COLLAPSE_KEY, type CollapseValue } from './types';
+
+defineOptions({
+  name: 'NutCollapse'
+});
+
+export type CollapseProps = Partial<{
+  modelValue: CollapseValue;
+  accordion: boolean;
+}>;
+
+const props = withDefaults(defineProps<CollapseProps>(), {
+  modelValue: '',
+  accordion: false
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    innerValue.value = val;
+  }
+);
+
+const changeVal = (val: string | number | Array<string | number>, name: string | number, status = true) => {
+  innerValue.value = val;
+  emit('update:modelValue', val);
+  emit('change', val, name, status);
+};
+
+const updateVal = (name: string | number) => {
+  if (props.accordion) {
+    if (innerValue.value === name) {
+      changeVal('', name, false);
+    } else {
+      changeVal(name, name, true);
+    }
+  } else {
+    if (Array.isArray(innerValue.value)) {
+      if (innerValue.value.includes(name)) {
+        const newValue = innerValue.value.filter((v: string | number) => v !== name);
+        changeVal(newValue, name, false);
+      } else {
+        const newValue = innerValue.value.concat([name]);
+        changeVal(newValue, name, true);
+      }
+    } else {
+      console.warn('[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组');
+    }
+  }
+};
+
+const isExpanded = (name: string | number) => {
+  if (props.accordion) {
+    return innerValue.value === name;
+  } else if (Array.isArray(innerValue.value)) {
+    return innerValue.value.includes(name);
+  }
+  return false;
+};
+
+provide(COLLAPSE_KEY, {
+  updateVal,
+  isExpanded
+});
+</script>
diff --git a/src/packages/__VUE/collapse/collapse.vue b/src/packages/__VUE/collapse/collapse.vue
new file mode 100644
index 0000000000..6c2f25dd00
--- /dev/null
+++ b/src/packages/__VUE/collapse/collapse.vue
@@ -0,0 +1,76 @@
+<template>
+  <view class="nut-collapse">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { provide, ref, watch } from 'vue';
+import { COLLAPSE_KEY, type CollapseValue } from './types';
+
+defineOptions({
+  name: 'NutCollapse'
+});
+
+export type CollapseProps = Partial<{
+  modelValue: CollapseValue;
+  accordion: boolean;
+}>;
+
+const props = withDefaults(defineProps<CollapseProps>(), {
+  modelValue: '',
+  accordion: false
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    innerValue.value = val;
+  }
+);
+
+const changeVal = (val: string | number | Array<string | number>, name: string | number, status = true) => {
+  innerValue.value = val;
+  emit('update:modelValue', val);
+  emit('change', val, name, status);
+};
+
+const updateVal = (name: string | number) => {
+  if (props.accordion) {
+    if (innerValue.value === name) {
+      changeVal('', name, false);
+    } else {
+      changeVal(name, name, true);
+    }
+  } else {
+    if (Array.isArray(innerValue.value)) {
+      if (innerValue.value.includes(name)) {
+        const newValue = innerValue.value.filter((v: string | number) => v !== name);
+        changeVal(newValue, name, false);
+      } else {
+        const newValue = innerValue.value.concat([name]);
+        changeVal(newValue, name, true);
+      }
+    } else {
+      console.warn('[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组');
+    }
+  }
+};
+
+const isExpanded = (name: string | number) => {
+  if (props.accordion) {
+    return innerValue.value === name;
+  } else if (Array.isArray(innerValue.value)) {
+    return innerValue.value.includes(name);
+  }
+  return false;
+};
+
+provide(COLLAPSE_KEY, {
+  updateVal,
+  isExpanded
+});
+</script>
diff --git a/src/packages/__VUE/collapse/doc.en-US.md b/src/packages/__VUE/collapse/doc.en-US.md
index 235e5eac4a..2da9fd0713 100644
--- a/src/packages/__VUE/collapse/doc.en-US.md
+++ b/src/packages/__VUE/collapse/doc.en-US.md
@@ -84,6 +84,20 @@ Set a custom icon through the `slots.icon` or `props.icon` property.
 | --- | --- | --- |
 | change | Triggered when switching panels | `(modelValue, currName, status)` |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  CollapseValue,
+  CollapseProps,
+  CollapseInstance,
+  CollapseItemProps,
+  CollapseItemInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/collapse/doc.md b/src/packages/__VUE/collapse/doc.md
index ac1d41360c..1081e18954 100644
--- a/src/packages/__VUE/collapse/doc.md
+++ b/src/packages/__VUE/collapse/doc.md
@@ -84,6 +84,20 @@ CollapseItem 组件必须设置 name 属性作为唯一标识符。
 | --- | --- | --- |
 | change | 切换面板时触发 | `(modelValue, currName, status)` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CollapseValue,
+  CollapseProps,
+  CollapseInstance,
+  CollapseItemProps,
+  CollapseItemInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/collapse/doc.taro.md b/src/packages/__VUE/collapse/doc.taro.md
index d29b7b8cf5..31742eed6e 100644
--- a/src/packages/__VUE/collapse/doc.taro.md
+++ b/src/packages/__VUE/collapse/doc.taro.md
@@ -84,6 +84,20 @@ CollapseItem 组件必须设置 name 属性作为唯一标识符。
 | --- | --- | --- |
 | change | 切换面板时触发 | `(modelValue, currName, status)` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CollapseValue,
+  CollapseProps,
+  CollapseInstance,
+  CollapseItemProps,
+  CollapseItemInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/collapse/index.taro.ts b/src/packages/__VUE/collapse/index.taro.ts
new file mode 100644
index 0000000000..8557b2acd7
--- /dev/null
+++ b/src/packages/__VUE/collapse/index.taro.ts
@@ -0,0 +1,13 @@
+import Collapse from './collapse.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Collapse);
+
+export type { CollapseProps } from './collapse.taro.vue';
+
+export type { CollapseValue } from './types';
+
+export type CollapseInstance = ComponentPublicInstance & InstanceType<typeof Collapse>;
+
+export { Collapse, Collapse as default };
diff --git a/src/packages/__VUE/collapse/index.taro.vue b/src/packages/__VUE/collapse/index.taro.vue
deleted file mode 100644
index 8461f746f5..0000000000
--- a/src/packages/__VUE/collapse/index.taro.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <view ref="nutCollapseRef" class="nut-collapse">
-    <slot></slot>
-  </view>
-</template>
-<script lang="ts">
-import { PropType, provide, ref, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { COLLAPSE_KEY } from './types';
-const { create } = createComponent('collapse');
-export default create({
-  props: {
-    modelValue: {
-      type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
-      default: ''
-    },
-    accordion: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'change'],
-  setup(props, { emit }) {
-    const nutCollapseRef = ref(null);
-    const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
-
-    watch(
-      () => props.modelValue,
-      (val) => {
-        innerValue.value = val;
-      }
-    );
-
-    const changeVal = (val: string | number | Array<string | number>, name: string | number, status = true) => {
-      innerValue.value = val;
-      emit('update:modelValue', val);
-      emit('change', val, name, status);
-    };
-
-    const updateVal = (name: string | number) => {
-      if (props.accordion) {
-        if (innerValue.value === name) {
-          changeVal('', name, false);
-        } else {
-          changeVal(name, name, true);
-        }
-      } else {
-        if (Array.isArray(innerValue.value)) {
-          if (innerValue.value.includes(name)) {
-            const newValue = innerValue.value.filter((v: string | number) => v !== name);
-            changeVal(newValue, name, false);
-          } else {
-            const newValue = innerValue.value.concat([name]);
-            changeVal(newValue, name, true);
-          }
-        } else {
-          console.warn('[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组');
-        }
-      }
-    };
-
-    const isExpanded = (name: string | number) => {
-      if (props.accordion) {
-        return innerValue.value === name;
-      } else if (Array.isArray(innerValue.value)) {
-        return innerValue.value.includes(name);
-      }
-      return false;
-    };
-
-    provide(COLLAPSE_KEY, {
-      updateVal,
-      isExpanded
-    });
-
-    return { nutCollapseRef };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/collapse/index.ts b/src/packages/__VUE/collapse/index.ts
new file mode 100644
index 0000000000..e38004f9af
--- /dev/null
+++ b/src/packages/__VUE/collapse/index.ts
@@ -0,0 +1,13 @@
+import Collapse from './collapse.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Collapse);
+
+export type { CollapseProps } from './collapse.vue';
+
+export type { CollapseValue } from './types';
+
+export type CollapseInstance = ComponentPublicInstance & InstanceType<typeof Collapse>;
+
+export { Collapse, Collapse as default };
diff --git a/src/packages/__VUE/collapse/index.vue b/src/packages/__VUE/collapse/index.vue
deleted file mode 100644
index 8461f746f5..0000000000
--- a/src/packages/__VUE/collapse/index.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <view ref="nutCollapseRef" class="nut-collapse">
-    <slot></slot>
-  </view>
-</template>
-<script lang="ts">
-import { PropType, provide, ref, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { COLLAPSE_KEY } from './types';
-const { create } = createComponent('collapse');
-export default create({
-  props: {
-    modelValue: {
-      type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
-      default: ''
-    },
-    accordion: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'change'],
-  setup(props, { emit }) {
-    const nutCollapseRef = ref(null);
-    const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
-
-    watch(
-      () => props.modelValue,
-      (val) => {
-        innerValue.value = val;
-      }
-    );
-
-    const changeVal = (val: string | number | Array<string | number>, name: string | number, status = true) => {
-      innerValue.value = val;
-      emit('update:modelValue', val);
-      emit('change', val, name, status);
-    };
-
-    const updateVal = (name: string | number) => {
-      if (props.accordion) {
-        if (innerValue.value === name) {
-          changeVal('', name, false);
-        } else {
-          changeVal(name, name, true);
-        }
-      } else {
-        if (Array.isArray(innerValue.value)) {
-          if (innerValue.value.includes(name)) {
-            const newValue = innerValue.value.filter((v: string | number) => v !== name);
-            changeVal(newValue, name, false);
-          } else {
-            const newValue = innerValue.value.concat([name]);
-            changeVal(newValue, name, true);
-          }
-        } else {
-          console.warn('[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组');
-        }
-      }
-    };
-
-    const isExpanded = (name: string | number) => {
-      if (props.accordion) {
-        return innerValue.value === name;
-      } else if (Array.isArray(innerValue.value)) {
-        return innerValue.value.includes(name);
-      }
-      return false;
-    };
-
-    provide(COLLAPSE_KEY, {
-      updateVal,
-      isExpanded
-    });
-
-    return { nutCollapseRef };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/collapse/types.ts b/src/packages/__VUE/collapse/types.ts
index 99e00c5832..d4bc9a139d 100644
--- a/src/packages/__VUE/collapse/types.ts
+++ b/src/packages/__VUE/collapse/types.ts
@@ -1,6 +1,8 @@
 import type { InjectionKey } from 'vue';
 
 export const COLLAPSE_KEY = Symbol('nut-collapse') as InjectionKey<{
-  updateVal: Function;
-  isExpanded: Function;
+  updateVal: (name: string | number) => void;
+  isExpanded: (name: string | number) => boolean;
 }>;
+
+export type CollapseValue = string | number | (string | number)[];
diff --git a/src/packages/__VUE/collapseitem/collapse-item.taro.vue b/src/packages/__VUE/collapseitem/collapse-item.taro.vue
new file mode 100644
index 0000000000..934136f6c0
--- /dev/null
+++ b/src/packages/__VUE/collapseitem/collapse-item.taro.vue
@@ -0,0 +1,169 @@
+<template>
+  <view :class="classes">
+    <view
+      :class="['nut-collapse-item__title', { 'nut-collapse-item__title--disabled': disabled }]"
+      @click="handleClick"
+    >
+      <view class="nut-collapse-item__title-main">
+        <view class="nut-collapse-item__title-main-value">
+          <slot v-if="$slots.title" name="title"></slot>
+          <template v-else>
+            <view class="nut-collapse-item__title-mtitle" v-html="title"></view>
+          </template>
+          <view v-if="label" class="nut-collapse-item__title-label">{{ label }}</view>
+        </view>
+      </view>
+      <view v-if="$slots.value" class="nut-collapse-item__title-sub">
+        <slot name="value"></slot>
+      </view>
+      <view v-else class="nut-collapse-item__title-sub" v-html="value"></view>
+      <view
+        :class="['nut-collapse-item__title-icon', { 'nut-collapse-item__title-icon--expanded': expanded }]"
+        :style="{ transform: 'rotate(' + (expanded ? rotate : 0) + 'deg)' }"
+      >
+        <slot v-if="$slots.icon" name="icon"></slot>
+        <component :is="renderIcon(icon)" v-else></component>
+      </view>
+    </view>
+
+    <view v-if="$slots.extra" class="nut-collapse__item-extraWrapper">
+      <div class="nut-collapse__item-extraWrapper__extraRender">
+        <slot name="extra"></slot>
+      </div>
+    </view>
+    <view
+      ref="wrapperRef"
+      class="nut-collapse__item-wrapper"
+      :style="{
+        willChange: 'height',
+        height: wrapperHeight
+      }"
+    >
+      <view :id="`nut-collapse__item-${refRandomId}`" class="nut-collapse__item-wrapper__content">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, inject, useSlots } from 'vue';
+import { DownArrow } from '@nutui/icons-vue-taro';
+import { renderIcon } from '@/packages/utils/create';
+import Taro from '@tarojs/taro';
+import { COLLAPSE_KEY } from '../collapse/types';
+
+defineOptions({
+  name: 'NutCollapseItem'
+});
+
+export type CollapseItemProps = Partial<{
+  title: string;
+  value: string;
+  label: string;
+  disabled: boolean;
+  name: string | number;
+  border: boolean;
+  icon: any;
+  rotate: string | number;
+}>;
+
+const props = withDefaults(defineProps<CollapseItemProps>(), {
+  title: '',
+  value: '',
+  label: '',
+  disabled: false,
+  name: -1,
+  border: true,
+  icon: () => DownArrow,
+  rotate: 180
+});
+
+const slots = useSlots();
+
+const wrapperRef = ref<HTMLDivElement | null>(null);
+const refRandomId = Math.random().toString(36).slice(-8);
+const target = `#nut-collapse__item-${refRandomId}`;
+const currentHeight = ref<string>('auto');
+const inAnimation = ref(false);
+const timeoutId = ref<any>('');
+const parent = inject(COLLAPSE_KEY);
+const classes = computed(() => {
+  const prefixCls = 'nut-collapse-item';
+  return {
+    [prefixCls]: true,
+    [prefixCls + '__border']: props.border
+  };
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    getRect(target).then((res: any) => {
+      if (res?.height) {
+        currentHeight.value = `${res.height}px`;
+      }
+    });
+  }, 100);
+});
+
+watch(
+  () => slots.default?.(),
+  () => {
+    setTimeout(() => {
+      getRect(target).then((res: any) => {
+        if (res?.height) {
+          currentHeight.value = `${res.height}px`;
+        }
+      });
+    }, 200);
+  }
+);
+
+const getRect = (selector: string) => {
+  return new Promise((resolve) => {
+    Taro.createSelectorQuery()
+      .select(selector)
+      .boundingClientRect()
+      .exec((rect = []) => {
+        resolve(rect[0]);
+      });
+  });
+};
+
+const expanded = computed(() => {
+  if (parent) {
+    return parent.isExpanded(props.name);
+  }
+  return false;
+});
+
+const wrapperHeight = ref(expanded.value ? 'auto' : '0px');
+
+const handleClick = () => {
+  if (!inAnimation.value) {
+    parent && parent.updateVal(props.name);
+  }
+};
+
+const toggle = (open: boolean) => {
+  // 连续切换状态时，清除打开的后续操作
+  if (timeoutId.value) {
+    clearTimeout(timeoutId.value);
+    timeoutId.value = '';
+  }
+  const start = open ? '0px' : currentHeight.value;
+  const end = open ? currentHeight.value : '0px';
+  inAnimation.value = true;
+  wrapperHeight.value = start;
+  setTimeout(() => {
+    wrapperHeight.value = end;
+    inAnimation.value = false;
+    if (open) {
+      timeoutId.value = setTimeout(() => {
+        wrapperHeight.value = 'auto';
+      }, 300);
+    }
+  }, 100);
+};
+
+watch(expanded, toggle);
+</script>
diff --git a/src/packages/__VUE/collapseitem/collapse-item.vue b/src/packages/__VUE/collapseitem/collapse-item.vue
new file mode 100644
index 0000000000..a06d2ebeae
--- /dev/null
+++ b/src/packages/__VUE/collapseitem/collapse-item.vue
@@ -0,0 +1,134 @@
+<template>
+  <view :class="classes">
+    <view :class="['nut-collapse-item__title', { 'nut-collapse-item__title--disabled': disabled }]" @click="toggle">
+      <view class="nut-collapse-item__title-main">
+        <view class="nut-collapse-item__title-main-value">
+          <slot v-if="$slots.title" name="title"></slot>
+          <template v-else>
+            <view class="nut-collapse-item__title-mtitle" v-html="title"></view>
+          </template>
+          <view v-if="label" class="nut-collapse-item__title-label">{{ label }}</view>
+        </view>
+      </view>
+      <view v-if="$slots.value" class="nut-collapse-item__title-sub">
+        <slot name="value"></slot>
+      </view>
+      <view v-else class="nut-collapse-item__title-sub" v-html="value"></view>
+      <view
+        :class="['nut-collapse-item__title-icon', { 'nut-collapse-item__title-icon--expanded': expanded }]"
+        :style="{ transform: 'rotate(' + (expanded ? rotate : 0) + 'deg)' }"
+      >
+        <slot v-if="$slots.icon" name="icon"></slot>
+        <component :is="renderIcon(icon)" v-else></component>
+      </view>
+    </view>
+
+    <view v-if="$slots.extra" class="nut-collapse__item-extraWrapper">
+      <div class="nut-collapse__item-extraWrapper__extraRender">
+        <slot name="extra"></slot>
+      </div>
+    </view>
+    <view
+      ref="wrapperRef"
+      class="nut-collapse__item-wrapper"
+      :style="{
+        willChange: 'height',
+        height: wrapperHeight
+      }"
+      @transitionend="onTransitionEnd"
+    >
+      <view ref="contentRef" class="nut-collapse__item-wrapper__content">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { ref, computed, watch, inject } from 'vue';
+import { DownArrow } from '@nutui/icons-vue';
+import { renderIcon } from '@/packages/utils/create';
+import { COLLAPSE_KEY } from '../collapse/types';
+
+defineOptions({
+  name: 'NutCollapseItem'
+});
+
+export type CollapseItemProps = Partial<{
+  title: string;
+  value: string;
+  label: string;
+  disabled: boolean;
+  name: string | number;
+  border: boolean;
+  icon: any;
+  rotate: string | number;
+}>;
+
+const props = withDefaults(defineProps<CollapseItemProps>(), {
+  title: '',
+  value: '',
+  label: '',
+  disabled: false,
+  name: -1,
+  border: true,
+  icon: () => DownArrow,
+  rotate: 180
+});
+
+// 获取 DOM 元素
+const wrapperRef = ref<HTMLDivElement | null>(null);
+const contentRef = ref<HTMLDivElement | null>(null);
+
+const parent = inject(COLLAPSE_KEY);
+
+const classes = computed(() => {
+  const prefixCls = 'nut-collapse-item';
+  return {
+    [prefixCls]: true,
+    [prefixCls + '__border']: props.border
+  };
+});
+
+const expanded = computed(() => {
+  if (parent) {
+    return parent.isExpanded(props.name);
+  }
+  return false;
+});
+
+const wrapperHeight = ref(expanded.value ? 'auto' : '0px');
+
+const toggle = () => {
+  parent && parent.updateVal(props.name);
+};
+
+const onTransitionEnd = () => {
+  if (expanded.value) {
+    wrapperHeight.value = 'auto';
+  }
+};
+
+const open = () => {
+  wrapperHeight.value = '0px';
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const height = contentRef.value?.offsetHeight;
+      wrapperHeight.value = height ? `${height}px` : 'auto';
+    });
+  });
+};
+
+const close = () => {
+  const height = contentRef.value?.offsetHeight;
+  wrapperHeight.value = height ? `${height}px` : 'auto';
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      wrapperHeight.value = '0px';
+    });
+  });
+};
+
+watch(expanded, (value) => {
+  value ? open() : close();
+});
+</script>
diff --git a/src/packages/__VUE/collapseitem/index.taro.ts b/src/packages/__VUE/collapseitem/index.taro.ts
new file mode 100644
index 0000000000..010bb330a6
--- /dev/null
+++ b/src/packages/__VUE/collapseitem/index.taro.ts
@@ -0,0 +1,11 @@
+import CollapseItem from './collapse-item.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(CollapseItem);
+
+export type { CollapseItemProps } from './collapse-item.taro.vue';
+
+export type CollapseItemInstance = ComponentPublicInstance & InstanceType<typeof CollapseItem>;
+
+export { CollapseItem, CollapseItem as default };
diff --git a/src/packages/__VUE/collapseitem/index.taro.vue b/src/packages/__VUE/collapseitem/index.taro.vue
deleted file mode 100644
index 2a0f666ddf..0000000000
--- a/src/packages/__VUE/collapseitem/index.taro.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<template>
-  <view :class="classes">
-    <view
-      :class="['nut-collapse-item__title', { 'nut-collapse-item__title--disabled': disabled }]"
-      @click="handleClick"
-    >
-      <view class="nut-collapse-item__title-main">
-        <view class="nut-collapse-item__title-main-value">
-          <slot v-if="$slots.title" name="title"></slot>
-          <template v-else>
-            <view class="nut-collapse-item__title-mtitle" v-html="title"></view>
-          </template>
-          <view v-if="label" class="nut-collapse-item__title-label">{{ label }}</view>
-        </view>
-      </view>
-      <view v-if="$slots.value" class="nut-collapse-item__title-sub">
-        <slot name="value"></slot>
-      </view>
-      <view v-else class="nut-collapse-item__title-sub" v-html="value"></view>
-      <view
-        :class="['nut-collapse-item__title-icon', { 'nut-collapse-item__title-icon--expanded': expanded }]"
-        :style="{ transform: 'rotate(' + (expanded ? rotate : 0) + 'deg)' }"
-      >
-        <slot v-if="$slots.icon" name="icon"></slot>
-        <component :is="renderIcon(icon)" v-else></component>
-      </view>
-    </view>
-
-    <view v-if="$slots.extra" class="nut-collapse__item-extraWrapper">
-      <div class="nut-collapse__item-extraWrapper__extraRender">
-        <slot name="extra"></slot>
-      </div>
-    </view>
-    <view
-      ref="wrapperRef"
-      class="nut-collapse__item-wrapper"
-      :style="{
-        willChange: 'height',
-        height: wrapperHeight
-      }"
-    >
-      <view :id="`nut-collapse__item-${refRandomId}`" class="nut-collapse__item-wrapper__content">
-        <slot></slot>
-      </view>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-import { ref, computed, watch, onMounted, inject } from 'vue';
-import { DownArrow } from '@nutui/icons-vue-taro';
-import { createComponent, renderIcon } from '@/packages/utils/create';
-import Taro from '@tarojs/taro';
-import { COLLAPSE_KEY } from '../collapse/types';
-const { create } = createComponent('collapse-item');
-
-export default create({
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: String,
-      default: ''
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    name: {
-      type: [Number, String],
-      default: -1,
-      required: true
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    icon: {
-      type: Object,
-      default: () => DownArrow
-    },
-    rotate: {
-      type: [String, Number],
-      default: 180
-    }
-  },
-  setup(props, { slots }) {
-    const wrapperRef: any = ref(null);
-    const refRandomId = Math.random().toString(36).slice(-8);
-    const target = `#nut-collapse__item-${refRandomId}`;
-    const currentHeight = ref<string>('auto');
-    const inAnimation = ref(false);
-    const timeoutId = ref<any>('');
-    const parent = inject(COLLAPSE_KEY);
-    const classes = computed(() => {
-      const prefixCls = 'nut-collapse-item';
-      return {
-        [prefixCls]: true,
-        [prefixCls + '__border']: props.border
-      };
-    });
-
-    onMounted(() => {
-      setTimeout(() => {
-        getRect(target).then((res: any) => {
-          if (res?.height) {
-            currentHeight.value = `${res.height}px`;
-          }
-        });
-      }, 100);
-    });
-
-    watch(
-      () => slots.default?.(),
-      () => {
-        setTimeout(() => {
-          getRect(target).then((res: any) => {
-            if (res?.height) {
-              currentHeight.value = `${res.height}px`;
-            }
-          });
-        }, 200);
-      }
-    );
-
-    const getRect = (selector: string) => {
-      return new Promise((resolve) => {
-        Taro.createSelectorQuery()
-          .select(selector)
-          .boundingClientRect()
-          .exec((rect = []) => {
-            resolve(rect[0]);
-          });
-      });
-    };
-
-    const expanded = computed(() => {
-      if (parent) {
-        return parent.isExpanded(props.name);
-      }
-      return false;
-    });
-
-    const wrapperHeight = ref(expanded.value ? 'auto' : '0px');
-
-    const handleClick = () => {
-      if (!inAnimation.value) {
-        parent && parent.updateVal(props.name);
-      }
-    };
-
-    const toggle = (open: boolean) => {
-      // 连续切换状态时，清除打开的后续操作
-      if (timeoutId.value) {
-        clearTimeout(timeoutId.value);
-        timeoutId.value = '';
-      }
-      const start = open ? '0px' : currentHeight.value;
-      const end = open ? currentHeight.value : '0px';
-      inAnimation.value = true;
-      wrapperHeight.value = start;
-      setTimeout(() => {
-        wrapperHeight.value = end;
-        inAnimation.value = false;
-        if (open) {
-          timeoutId.value = setTimeout(() => {
-            wrapperHeight.value = 'auto';
-          }, 300);
-        }
-      }, 100);
-    };
-
-    watch(expanded, toggle);
-
-    return {
-      refRandomId,
-      classes,
-      renderIcon,
-      wrapperRef,
-      handleClick,
-      wrapperHeight,
-      expanded
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/collapseitem/index.ts b/src/packages/__VUE/collapseitem/index.ts
new file mode 100644
index 0000000000..063e0d9521
--- /dev/null
+++ b/src/packages/__VUE/collapseitem/index.ts
@@ -0,0 +1,11 @@
+import CollapseItem from './collapse-item.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(CollapseItem);
+
+export type { CollapseItemProps } from './collapse-item.vue';
+
+export type CollapseItemInstance = ComponentPublicInstance & InstanceType<typeof CollapseItem>;
+
+export { CollapseItem, CollapseItem as default };
diff --git a/src/packages/__VUE/collapseitem/index.vue b/src/packages/__VUE/collapseitem/index.vue
deleted file mode 100644
index dc0429ebaa..0000000000
--- a/src/packages/__VUE/collapseitem/index.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-  <view :class="classes">
-    <view :class="['nut-collapse-item__title', { 'nut-collapse-item__title--disabled': disabled }]" @click="toggle">
-      <view class="nut-collapse-item__title-main">
-        <view class="nut-collapse-item__title-main-value">
-          <slot v-if="$slots.title" name="title"></slot>
-          <template v-else>
-            <view class="nut-collapse-item__title-mtitle" v-html="title"></view>
-          </template>
-          <view v-if="label" class="nut-collapse-item__title-label">{{ label }}</view>
-        </view>
-      </view>
-      <view v-if="$slots.value" class="nut-collapse-item__title-sub">
-        <slot name="value"></slot>
-      </view>
-      <view v-else class="nut-collapse-item__title-sub" v-html="value"></view>
-      <view
-        :class="['nut-collapse-item__title-icon', { 'nut-collapse-item__title-icon--expanded': expanded }]"
-        :style="{ transform: 'rotate(' + (expanded ? rotate : 0) + 'deg)' }"
-      >
-        <slot v-if="$slots.icon" name="icon"></slot>
-        <component :is="renderIcon(icon)" v-else></component>
-      </view>
-    </view>
-
-    <view v-if="$slots.extra" class="nut-collapse__item-extraWrapper">
-      <div class="nut-collapse__item-extraWrapper__extraRender">
-        <slot name="extra"></slot>
-      </div>
-    </view>
-    <view
-      ref="wrapperRef"
-      class="nut-collapse__item-wrapper"
-      :style="{
-        willChange: 'height',
-        height: wrapperHeight
-      }"
-      @transitionend="onTransitionEnd"
-    >
-      <view ref="contentRef" class="nut-collapse__item-wrapper__content">
-        <slot></slot>
-      </view>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-import { ref, computed, watch, inject } from 'vue';
-import { DownArrow } from '@nutui/icons-vue';
-import { createComponent, renderIcon } from '@/packages/utils/create';
-import { COLLAPSE_KEY } from '../collapse/types';
-const { create } = createComponent('collapse-item');
-
-export default create({
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: String,
-      default: ''
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    name: {
-      type: [Number, String],
-      default: -1,
-      required: true
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    icon: {
-      type: Object,
-      default: () => DownArrow
-    },
-    rotate: {
-      type: [String, Number],
-      default: 180
-    }
-  },
-  setup(props) {
-    // 获取 DOM 元素
-    const wrapperRef: any = ref(null);
-    const contentRef: any = ref(null);
-
-    const parent = inject(COLLAPSE_KEY);
-
-    const classes = computed(() => {
-      const prefixCls = 'nut-collapse-item';
-      return {
-        [prefixCls]: true,
-        [prefixCls + '__border']: props.border
-      };
-    });
-
-    const expanded = computed(() => {
-      if (parent) {
-        return parent.isExpanded(props.name);
-      }
-      return false;
-    });
-
-    const wrapperHeight = ref(expanded.value ? 'auto' : '0px');
-
-    const toggle = () => {
-      parent && parent.updateVal(props.name);
-    };
-
-    const onTransitionEnd = () => {
-      if (expanded.value) {
-        wrapperHeight.value = 'auto';
-      }
-    };
-
-    const open = () => {
-      wrapperHeight.value = '0px';
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          const height = contentRef.value?.offsetHeight;
-          wrapperHeight.value = height ? `${height}px` : 'auto';
-        });
-      });
-    };
-
-    const close = () => {
-      const height = contentRef.value?.offsetHeight;
-      wrapperHeight.value = height ? `${height}px` : 'auto';
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          wrapperHeight.value = '0px';
-        });
-      });
-    };
-
-    watch(expanded, (value) => {
-      value ? open() : close();
-    });
-
-    return {
-      classes,
-      renderIcon,
-      wrapperRef,
-      contentRef,
-      open,
-      toggle,
-      wrapperHeight,
-      expanded,
-      onTransitionEnd
-    };
-  }
-});
-</script>