diff --git a/src/config.json b/src/config.json
index ee8732ea33..0239f9a46c 100644
--- a/src/config.json
+++ b/src/config.json
@@ -80,6 +80,7 @@
           "name": "Cell",
           "cName": "单元格",
           "desc": "展示列表",
+          "setup": true,
           "author": "richard1015"
         },
         {
@@ -88,6 +89,7 @@
           "cName": "单元格组件",
           "show": false,
           "desc": "展示分组列表",
+          "setup": true,
           "author": "richard1015"
         },
         {
diff --git a/src/packages/__VUE/cell/cell.taro.vue b/src/packages/__VUE/cell/cell.taro.vue
new file mode 100644
index 0000000000..4346ecf143
--- /dev/null
+++ b/src/packages/__VUE/cell/cell.taro.vue
@@ -0,0 +1,96 @@
+<template>
+  <view :class="classes" :style="baseStyle" @click="handleClick">
+    <slot>
+      <view v-if="$slots.icon" class="nut-cell__icon">
+        <slot name="icon"></slot>
+      </view>
+      <view v-if="title || subTitle || $slots.title" class="nut-cell__title">
+        <template v-if="subTitle">
+          <slot name="title">
+            <view class="title">{{ title }}</view>
+          </slot>
+          <view class="nut-cell__title-desc">{{ subTitle }}</view>
+        </template>
+        <template v-else>
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </template>
+      </view>
+      <view
+        v-if="desc || $slots.desc"
+        class="nut-cell__value"
+        :class="{ 'nut-cell__value--alone': !title && !subTitle && !$slots.title }"
+        :style="descStyle"
+      >
+        <slot name="desc">
+          {{ desc }}
+        </slot>
+      </view>
+      <slot name="link">
+        <Right v-if="isLink" class="nut-cell__link"></Right>
+      </slot>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import { pxCheck } from '@/packages/utils/pxCheck'
+import { Right } from '@nutui/icons-vue-taro'
+import type { CellSize } from './types'
+
+defineOptions({
+  name: 'NutCell'
+})
+
+export type CellProps = Partial<{
+  title: string
+  subTitle: string
+  desc: string
+  descTextAlign: string
+  isLink: boolean
+  roundRadius: string | number
+  center: boolean
+  size: CellSize
+}>
+
+const props = withDefaults(defineProps<CellProps>(), {
+  title: '',
+  subTitle: '',
+  desc: '',
+  descTextAlign: 'right',
+  isLink: false,
+  roundRadius: '',
+  center: false,
+  size: 'normal'
+})
+
+const emit = defineEmits(['click'])
+
+const classes = computed(() => {
+  const prefixCls = 'nut-cell'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--clickable`]: props.isLink,
+    [`${prefixCls}--center`]: props.center,
+    [`${prefixCls}--large`]: props.size === 'large'
+  }
+})
+
+const baseStyle = computed(() => {
+  return {
+    borderRadius: pxCheck(props.roundRadius)
+  }
+})
+
+const descStyle = computed(() => {
+  return {
+    textAlign: props.descTextAlign
+  } as CSSProperties
+})
+
+const handleClick = (event: Event) => {
+  emit('click', event)
+}
+</script>
diff --git a/src/packages/__VUE/cell/cell.vue b/src/packages/__VUE/cell/cell.vue
new file mode 100644
index 0000000000..5d130ac54c
--- /dev/null
+++ b/src/packages/__VUE/cell/cell.vue
@@ -0,0 +1,118 @@
+<template>
+  <view :class="classes" :style="baseStyle" @click="handleClick">
+    <slot>
+      <view v-if="$slots.icon" class="nut-cell__icon">
+        <slot name="icon"></slot>
+      </view>
+      <view v-if="title || subTitle || $slots.title" class="nut-cell__title">
+        <template v-if="subTitle">
+          <slot name="title">
+            <view class="title">{{ title }}</view>
+          </slot>
+          <view class="nut-cell__title-desc">{{ subTitle }}</view>
+        </template>
+        <template v-else>
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </template>
+      </view>
+      <view
+        v-if="desc || $slots.desc"
+        class="nut-cell__value"
+        :class="{ 'nut-cell__value--alone': !title && !subTitle && !$slots.title }"
+        :style="descStyle"
+      >
+        <slot name="desc">
+          {{ desc }}
+        </slot>
+      </view>
+      <slot name="link">
+        <Right v-if="isLink || to" class="nut-cell__link"></Right>
+      </slot>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import { useRouter } from '@/packages/utils/useRoute'
+import { pxCheck } from '@/packages/utils/pxCheck'
+import { Right } from '@nutui/icons-vue'
+import type { CellSize } from './types'
+
+defineOptions({
+  name: 'NutCell'
+})
+
+export type CellProps = Partial<{
+  title: string
+  subTitle: string
+  desc: string
+  descTextAlign: string
+  isLink: boolean
+  roundRadius: string | number
+  center: boolean
+  size: CellSize
+  /**
+   * @deprecated It will be removed in next major version.
+   */
+  to: string | object
+  /**
+   * @deprecated It will be removed in next major version.
+   */
+  replace: boolean
+  /**
+   * @deprecated It will be removed in next major version.
+   */
+  url: string
+}>
+
+const props = withDefaults(defineProps<CellProps>(), {
+  title: '',
+  subTitle: '',
+  desc: '',
+  descTextAlign: 'right',
+  isLink: false,
+  roundRadius: '',
+  center: false,
+  size: 'normal',
+  replace: false,
+  url: ''
+})
+
+const emit = defineEmits(['click'])
+
+const classes = computed(() => {
+  const prefixCls = 'nut-cell'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--clickable`]: props.isLink || props.to,
+    [`${prefixCls}--center`]: props.center,
+    [`${prefixCls}--large`]: props.size === 'large'
+  }
+})
+const router = useRouter()
+
+const baseStyle = computed(() => {
+  return {
+    borderRadius: pxCheck(props.roundRadius)
+  }
+})
+
+const descStyle = computed(() => {
+  return {
+    textAlign: props.descTextAlign
+  } as CSSProperties
+})
+
+const handleClick = (event: Event) => {
+  emit('click', event)
+
+  if (props.to && router) {
+    router[props.replace ? 'replace' : 'push'](props.to)
+  } else if (props.url) {
+    props.replace ? location.replace(props.url) : (location.href = props.url)
+  }
+}
+</script>
diff --git a/src/packages/__VUE/cell/doc.en-US.md b/src/packages/__VUE/cell/doc.en-US.md
index eefa2a8f87..828047226a 100644
--- a/src/packages/__VUE/cell/doc.en-US.md
+++ b/src/packages/__VUE/cell/doc.en-US.md
@@ -105,6 +105,18 @@ You can center the left and right contents of the cell vertically through the 'c
 | title | Custom `title` slot |
 | desc | Custom `desc` slot |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  CellSize,
+  CellProps,
+  CellInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/cell/doc.md b/src/packages/__VUE/cell/doc.md
index 6645819e1c..893949e030 100644
--- a/src/packages/__VUE/cell/doc.md
+++ b/src/packages/__VUE/cell/doc.md
@@ -105,6 +105,18 @@ app.use(CellGroup)
 | title | 自定义 `title` 标题区域 |
 | desc | 自定义 `desc` 描述区域 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CellSize,
+  CellProps,
+  CellInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/cell/doc.taro.md b/src/packages/__VUE/cell/doc.taro.md
index dc86c9ccf2..af467bc4d1 100644
--- a/src/packages/__VUE/cell/doc.taro.md
+++ b/src/packages/__VUE/cell/doc.taro.md
@@ -102,6 +102,18 @@ app.use(CellGroup)
 | title | 自定义 `title` 标题区域 |
 | desc | 自定义 `desc` 描述区域 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CellSize,
+  CellProps,
+  CellInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/cell/index.taro.ts b/src/packages/__VUE/cell/index.taro.ts
new file mode 100644
index 0000000000..d7bc83ac86
--- /dev/null
+++ b/src/packages/__VUE/cell/index.taro.ts
@@ -0,0 +1,13 @@
+import Cell from './cell.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Cell)
+
+export type { CellProps } from './cell.taro.vue'
+
+export type { CellSize } from './types'
+
+export type CellInstance = ComponentPublicInstance & InstanceType<typeof Cell>
+
+export { Cell, Cell as default }
diff --git a/src/packages/__VUE/cell/index.taro.vue b/src/packages/__VUE/cell/index.taro.vue
deleted file mode 100644
index 07b44de673..0000000000
--- a/src/packages/__VUE/cell/index.taro.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <view :class="classes" :style="baseStyle" @click="handleClick">
-    <slot>
-      <view v-if="$slots.icon" class="nut-cell__icon">
-        <slot name="icon"></slot>
-      </view>
-      <view v-if="title || subTitle || $slots.title" class="nut-cell__title">
-        <template v-if="subTitle">
-          <slot name="title">
-            <view class="title">{{ title }}</view>
-          </slot>
-          <view class="nut-cell__title-desc">{{ subTitle }}</view>
-        </template>
-        <template v-else>
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </template>
-      </view>
-      <view
-        v-if="desc || $slots.desc"
-        class="nut-cell__value"
-        :class="{ 'nut-cell__value--alone': !title && !subTitle && !$slots.title }"
-        :style="descStyle"
-      >
-        <slot name="desc">
-          {{ desc }}
-        </slot>
-      </view>
-      <slot name="link">
-        <Right v-if="isLink" class="nut-cell__link"></Right>
-      </slot>
-    </slot>
-  </view>
-</template>
-
-<script lang="ts">
-import type { PropType, CSSProperties } from 'vue'
-import { computed } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { pxCheck } from '@/packages/utils/pxCheck'
-import { Right } from '@nutui/icons-vue-taro'
-import { CellSize } from './types'
-const { componentName, create } = createComponent('cell')
-export default create({
-  components: { Right },
-  props: {
-    title: { type: String, default: '' },
-    subTitle: { type: String, default: '' },
-    desc: { type: String, default: '' },
-    descTextAlign: {
-      type: String,
-      default: 'right'
-    },
-    isLink: { type: Boolean, default: false },
-    roundRadius: { type: [String, Number], default: '' },
-    center: { type: Boolean, default: false },
-    size: {
-      type: String as PropType<CellSize>,
-      default: 'normal'
-    }
-  },
-  emits: ['click'],
-  setup(props, { emit }) {
-    const classes = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--clickable`]: props.isLink,
-        [`${prefixCls}--center`]: props.center,
-        [`${prefixCls}--large`]: props.size === 'large'
-      }
-    })
-
-    const baseStyle = computed(() => {
-      return {
-        borderRadius: pxCheck(props.roundRadius)
-      }
-    })
-
-    const descStyle = computed(() => {
-      return {
-        textAlign: props.descTextAlign
-      } as CSSProperties
-    })
-
-    const handleClick = (event: Event) => {
-      emit('click', event)
-    }
-
-    return {
-      handleClick,
-      classes,
-      baseStyle,
-      descStyle
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/cell/index.ts b/src/packages/__VUE/cell/index.ts
new file mode 100644
index 0000000000..ad1b24b33d
--- /dev/null
+++ b/src/packages/__VUE/cell/index.ts
@@ -0,0 +1,13 @@
+import Cell from './cell.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Cell)
+
+export type { CellProps } from './cell.vue'
+
+export type { CellSize } from './types'
+
+export type CellInstance = ComponentPublicInstance & InstanceType<typeof Cell>
+
+export { Cell, Cell as default }
diff --git a/src/packages/__VUE/cell/index.vue b/src/packages/__VUE/cell/index.vue
deleted file mode 100644
index ccc812e65c..0000000000
--- a/src/packages/__VUE/cell/index.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <view :class="classes" :style="baseStyle" @click="handleClick">
-    <slot>
-      <view v-if="$slots.icon" class="nut-cell__icon">
-        <slot name="icon"></slot>
-      </view>
-      <view v-if="title || subTitle || $slots.title" class="nut-cell__title">
-        <template v-if="subTitle">
-          <slot name="title">
-            <view class="title">{{ title }}</view>
-          </slot>
-          <view class="nut-cell__title-desc">{{ subTitle }}</view>
-        </template>
-        <template v-else>
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </template>
-      </view>
-      <view
-        v-if="desc || $slots.desc"
-        class="nut-cell__value"
-        :class="{ 'nut-cell__value--alone': !title && !subTitle && !$slots.title }"
-        :style="descStyle"
-      >
-        <slot name="desc">
-          {{ desc }}
-        </slot>
-      </view>
-      <slot name="link">
-        <Right v-if="isLink || to" class="nut-cell__link"></Right>
-      </slot>
-    </slot>
-  </view>
-</template>
-
-<script lang="ts">
-import type { PropType, CSSProperties } from 'vue'
-import { computed } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { useRouter } from '@/packages/utils/useRoute'
-import { pxCheck } from '@/packages/utils/pxCheck'
-import { Right } from '@nutui/icons-vue'
-import { CellSize } from './types'
-const { componentName, create } = createComponent('cell')
-export default create({
-  components: { Right },
-  props: {
-    title: { type: String, default: '' },
-    subTitle: { type: String, default: '' },
-    desc: { type: String, default: '' },
-    descTextAlign: {
-      type: String,
-      default: 'right'
-    },
-    isLink: { type: Boolean, default: false },
-    to: [String, Object],
-    replace: { type: Boolean, default: false },
-    roundRadius: { type: [String, Number], default: '' },
-    url: { type: String, default: '' },
-    center: { type: Boolean, default: false },
-    size: {
-      type: String as PropType<CellSize>,
-      default: 'normal'
-    }
-  },
-  emits: ['click'],
-  setup(props, { emit }) {
-    const classes = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--clickable`]: props.isLink || props.to,
-        [`${prefixCls}--center`]: props.center,
-        [`${prefixCls}--large`]: props.size === 'large'
-      }
-    })
-    const router = useRouter()
-
-    const baseStyle = computed(() => {
-      return {
-        borderRadius: pxCheck(props.roundRadius)
-      }
-    })
-
-    const descStyle = computed(() => {
-      return {
-        textAlign: props.descTextAlign
-      } as CSSProperties
-    })
-
-    const handleClick = (event: Event) => {
-      emit('click', event)
-
-      if (props.to && router) {
-        router[props.replace ? 'replace' : 'push'](props.to)
-      } else if (props.url) {
-        props.replace ? location.replace(props.url) : (location.href = props.url)
-      }
-    }
-
-    return {
-      handleClick,
-      classes,
-      baseStyle,
-      descStyle
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/cellgroup/index.taro.vue b/src/packages/__VUE/cellgroup/cell-group.taro.vue
similarity index 61%
rename from src/packages/__VUE/cellgroup/index.taro.vue
rename to src/packages/__VUE/cellgroup/cell-group.taro.vue
index 94ddb73791..602d023e8e 100644
--- a/src/packages/__VUE/cellgroup/index.taro.vue
+++ b/src/packages/__VUE/cellgroup/cell-group.taro.vue
@@ -10,13 +10,18 @@
   </view>
 </template>
 
-<script lang="ts">
-import { createComponent } from '@/packages/utils/create'
-const { create } = createComponent('cell-group')
-export default create({
-  props: {
-    title: { type: String, default: '' },
-    desc: { type: String, default: '' }
-  }
+<script setup lang="ts">
+defineOptions({
+  name: 'NutCellGroup'
+})
+
+export type CellGroupProps = Partial<{
+  title: string
+  desc: string
+}>
+
+withDefaults(defineProps<CellGroupProps>(), {
+  title: '',
+  desc: ''
 })
 </script>
diff --git a/src/packages/__VUE/cellgroup/index.vue b/src/packages/__VUE/cellgroup/cell-group.vue
similarity index 61%
rename from src/packages/__VUE/cellgroup/index.vue
rename to src/packages/__VUE/cellgroup/cell-group.vue
index 94ddb73791..602d023e8e 100644
--- a/src/packages/__VUE/cellgroup/index.vue
+++ b/src/packages/__VUE/cellgroup/cell-group.vue
@@ -10,13 +10,18 @@
   </view>
 </template>
 
-<script lang="ts">
-import { createComponent } from '@/packages/utils/create'
-const { create } = createComponent('cell-group')
-export default create({
-  props: {
-    title: { type: String, default: '' },
-    desc: { type: String, default: '' }
-  }
+<script setup lang="ts">
+defineOptions({
+  name: 'NutCellGroup'
+})
+
+export type CellGroupProps = Partial<{
+  title: string
+  desc: string
+}>
+
+withDefaults(defineProps<CellGroupProps>(), {
+  title: '',
+  desc: ''
 })
 </script>
diff --git a/src/packages/__VUE/cellgroup/index.taro.ts b/src/packages/__VUE/cellgroup/index.taro.ts
new file mode 100644
index 0000000000..b503cb6dd0
--- /dev/null
+++ b/src/packages/__VUE/cellgroup/index.taro.ts
@@ -0,0 +1,11 @@
+import CellGroup from './cell-group.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(CellGroup)
+
+export type { CellGroupProps } from './cell-group.taro.vue'
+
+export type CellGroupInstance = ComponentPublicInstance & InstanceType<typeof CellGroup>
+
+export { CellGroup, CellGroup as default }
diff --git a/src/packages/__VUE/cellgroup/index.ts b/src/packages/__VUE/cellgroup/index.ts
new file mode 100644
index 0000000000..83850096ae
--- /dev/null
+++ b/src/packages/__VUE/cellgroup/index.ts
@@ -0,0 +1,11 @@
+import CellGroup from './cell-group.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(CellGroup)
+
+export type { CellGroupProps } from './cell-group.vue'
+
+export type CellGroupInstance = ComponentPublicInstance & InstanceType<typeof CellGroup>
+
+export { CellGroup, CellGroup as default }
diff --git a/src/packages/__VUE/form/form.taro.vue b/src/packages/__VUE/form/form.taro.vue
index 0ef42731be..ac5ca568ed 100644
--- a/src/packages/__VUE/form/form.taro.vue
+++ b/src/packages/__VUE/form/form.taro.vue
@@ -8,7 +8,7 @@
 <script setup lang="ts">
 import { reactive, computed, provide, watch } from 'vue'
 import { useChildren, getPropByPath, isPromise } from '@/packages/utils'
-import NutCellGroup from '../cellgroup/index.taro.vue'
+import NutCellGroup from '../cellgroup/index.taro'
 import type { FormErrorMessage, FormLabelPosition, FormRule, FormRules, FormStarPosition, FormItemRule } from './types'
 import { FORM_KEY, FORM_DISABLED_KEY } from './common'
 
diff --git a/src/packages/__VUE/form/form.vue b/src/packages/__VUE/form/form.vue
index 2236f9b624..bc1ad2f5c9 100644
--- a/src/packages/__VUE/form/form.vue
+++ b/src/packages/__VUE/form/form.vue
@@ -8,7 +8,7 @@
 <script setup lang="ts">
 import { reactive, computed, provide, watch } from 'vue'
 import { useChildren, getPropByPath, isPromise } from '@/packages/utils'
-import NutCellGroup from '../cellgroup/index.vue'
+import NutCellGroup from '../cellgroup'
 import type { FormErrorMessage, FormLabelPosition, FormRule, FormRules, FormStarPosition, FormItemRule } from './types'
 import { FORM_KEY, FORM_DISABLED_KEY } from './common'
 
diff --git a/src/packages/__VUE/formitem/form-item.taro.vue b/src/packages/__VUE/formitem/form-item.taro.vue
index c31ad599a5..94c0dbb5c3 100644
--- a/src/packages/__VUE/formitem/form-item.taro.vue
+++ b/src/packages/__VUE/formitem/form-item.taro.vue
@@ -27,7 +27,7 @@
 import { pxCheck } from '@/packages/utils/pxCheck'
 import { computed, inject, CSSProperties } from 'vue'
 import type { FormItemRule, FormLabelPosition, FormStarPosition } from '../form/types'
-import NutCell from '../cell/index.taro.vue'
+import NutCell from '../cell/index.taro'
 import { FORM_KEY } from '../form/common'
 import { useParent } from '@/packages/utils'
 
diff --git a/src/packages/__VUE/formitem/form-item.vue b/src/packages/__VUE/formitem/form-item.vue
index f77ef6a1a4..90dce612aa 100644
--- a/src/packages/__VUE/formitem/form-item.vue
+++ b/src/packages/__VUE/formitem/form-item.vue
@@ -27,7 +27,7 @@
 import { pxCheck } from '@/packages/utils/pxCheck'
 import { computed, inject, CSSProperties } from 'vue'
 import type { FormItemRule, FormLabelPosition, FormStarPosition } from '../form/types'
-import NutCell from '../cell/index.vue'
+import NutCell from '../cell'
 import { FORM_KEY } from '../form/common'
 import { useParent } from '@/packages/utils'