diff --git a/src/config.json b/src/config.json
index afff0d61a1..455198a7e9 100644
--- a/src/config.json
+++ b/src/config.json
@@ -185,6 +185,7 @@
           "cName": "布局",
           "type": "component",
           "show": true,
+          "setup": true,
           "desc": "简便地创建布局",
           "author": "undo"
         },
@@ -196,6 +197,7 @@
           "type": "component",
           "show": false,
           "taro": true,
+          "setup": true,
           "exportEmpty": true,
           "desc": "布局组件Col",
           "author": "undo"
@@ -208,6 +210,7 @@
           "type": "component",
           "show": false,
           "taro": true,
+          "setup": true,
           "exportEmpty": true,
           "desc": "布局组件Row",
           "author": "undo"
diff --git a/src/packages/__VUE/col/__tests__/index.spec.ts b/src/packages/__VUE/col/__tests__/index.spec.ts
index b5bd7b014e..5fdbaae131 100644
--- a/src/packages/__VUE/col/__tests__/index.spec.ts
+++ b/src/packages/__VUE/col/__tests__/index.spec.ts
@@ -1,5 +1,5 @@
-import Col from '../index.vue';
-import Row from '../../row/index.vue';
+import Col from '../';
+import Row from '../../row';
 import { mount } from '@vue/test-utils';
 
 // 测试用例
diff --git a/src/packages/__VUE/col/col.taro.vue b/src/packages/__VUE/col/col.taro.vue
new file mode 100644
index 0000000000..cb47645794
--- /dev/null
+++ b/src/packages/__VUE/col/col.taro.vue
@@ -0,0 +1,40 @@
+<template>
+  <view :class="classes" :style="style">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { LAYOUT_KEY } from '../layout/types';
+
+defineOptions({
+  name: 'NutCol'
+});
+
+export type ColProps = Partial<{
+  span: string | number;
+  offset: string | number;
+}>;
+
+const props = withDefaults(defineProps<ColProps>(), {
+  span: 24,
+  offset: 0
+});
+
+const prefixCls = 'nut-col';
+const gutter = inject(LAYOUT_KEY) as number;
+const classes = computed(() => {
+  return {
+    [prefixCls]: true,
+    [prefixCls + '-gutter']: gutter,
+    ['nut-col-' + props.span]: true,
+    ['nut-col-offset-' + props.offset]: true
+  };
+});
+const style = computed(() => {
+  return {
+    paddingLeft: gutter / 2 + 'px',
+    paddingRight: gutter / 2 + 'px'
+  };
+});
+</script>
diff --git a/src/packages/__VUE/col/col.vue b/src/packages/__VUE/col/col.vue
new file mode 100644
index 0000000000..cb47645794
--- /dev/null
+++ b/src/packages/__VUE/col/col.vue
@@ -0,0 +1,40 @@
+<template>
+  <view :class="classes" :style="style">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { LAYOUT_KEY } from '../layout/types';
+
+defineOptions({
+  name: 'NutCol'
+});
+
+export type ColProps = Partial<{
+  span: string | number;
+  offset: string | number;
+}>;
+
+const props = withDefaults(defineProps<ColProps>(), {
+  span: 24,
+  offset: 0
+});
+
+const prefixCls = 'nut-col';
+const gutter = inject(LAYOUT_KEY) as number;
+const classes = computed(() => {
+  return {
+    [prefixCls]: true,
+    [prefixCls + '-gutter']: gutter,
+    ['nut-col-' + props.span]: true,
+    ['nut-col-offset-' + props.offset]: true
+  };
+});
+const style = computed(() => {
+  return {
+    paddingLeft: gutter / 2 + 'px',
+    paddingRight: gutter / 2 + 'px'
+  };
+});
+</script>
diff --git a/src/packages/__VUE/col/index.taro.ts b/src/packages/__VUE/col/index.taro.ts
new file mode 100644
index 0000000000..fb86184efd
--- /dev/null
+++ b/src/packages/__VUE/col/index.taro.ts
@@ -0,0 +1,11 @@
+import Col from './col.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Col);
+
+export type { ColProps } from './col.taro.vue';
+
+export type ColInstance = ComponentPublicInstance & InstanceType<typeof Col>;
+
+export { Col, Col as default };
diff --git a/src/packages/__VUE/col/index.taro.vue b/src/packages/__VUE/col/index.taro.vue
deleted file mode 100644
index 27de378a69..0000000000
--- a/src/packages/__VUE/col/index.taro.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <view :class="classes" :style="style">
-    <slot></slot>
-  </view>
-</template>
-<script lang="ts">
-import { computed, inject } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { LAYOUT_KEY } from '../layout/types';
-const { create } = createComponent('col');
-
-export default create({
-  props: {
-    span: {
-      type: [String, Number],
-      default: '24'
-    },
-    offset: {
-      type: [String, Number],
-      default: '0'
-    }
-  },
-  emits: [],
-  setup(props) {
-    const prefixCls = 'nut-col';
-    const gutter = inject(LAYOUT_KEY) as number;
-    const classes = computed(() => {
-      return {
-        [prefixCls]: true,
-        [prefixCls + '-gutter']: gutter,
-        ['nut-col-' + props.span]: true,
-        ['nut-col-offset-' + props.offset]: true
-      };
-    });
-    const style = computed(() => {
-      return {
-        paddingLeft: gutter / 2 + 'px',
-        paddingRight: gutter / 2 + 'px'
-      };
-    });
-    return {
-      classes,
-      style
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/col/index.ts b/src/packages/__VUE/col/index.ts
new file mode 100644
index 0000000000..6ea5ac7e3e
--- /dev/null
+++ b/src/packages/__VUE/col/index.ts
@@ -0,0 +1,11 @@
+import Col from './col.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Col);
+
+export type { ColProps } from './col.vue';
+
+export type ColInstance = ComponentPublicInstance & InstanceType<typeof Col>;
+
+export { Col, Col as default };
diff --git a/src/packages/__VUE/col/index.vue b/src/packages/__VUE/col/index.vue
deleted file mode 100644
index 27de378a69..0000000000
--- a/src/packages/__VUE/col/index.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <view :class="classes" :style="style">
-    <slot></slot>
-  </view>
-</template>
-<script lang="ts">
-import { computed, inject } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { LAYOUT_KEY } from '../layout/types';
-const { create } = createComponent('col');
-
-export default create({
-  props: {
-    span: {
-      type: [String, Number],
-      default: '24'
-    },
-    offset: {
-      type: [String, Number],
-      default: '0'
-    }
-  },
-  emits: [],
-  setup(props) {
-    const prefixCls = 'nut-col';
-    const gutter = inject(LAYOUT_KEY) as number;
-    const classes = computed(() => {
-      return {
-        [prefixCls]: true,
-        [prefixCls + '-gutter']: gutter,
-        ['nut-col-' + props.span]: true,
-        ['nut-col-offset-' + props.offset]: true
-      };
-    });
-    const style = computed(() => {
-      return {
-        paddingLeft: gutter / 2 + 'px',
-        paddingRight: gutter / 2 + 'px'
-      };
-    });
-    return {
-      classes,
-      style
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/layout/doc.en-US.md b/src/packages/__VUE/layout/doc.en-US.md
index f56dc7d50c..78c5e1f581 100644
--- a/src/packages/__VUE/layout/doc.en-US.md
+++ b/src/packages/__VUE/layout/doc.en-US.md
@@ -59,3 +59,16 @@ The Layout component provides a 24-column grid, by adding the span attribute on
 | Event | Description | callback parameter |
 | --- | --- | --- |
 | click | Triggered when clicked | `event: MouseEvent` |
+
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  RowProps,
+  RowInstance,
+  ColProps,
+  ColInstance
+} from '@nutui/nutui';
+```
diff --git a/src/packages/__VUE/layout/doc.md b/src/packages/__VUE/layout/doc.md
index 945a4fc1ea..d6d3f03dde 100644
--- a/src/packages/__VUE/layout/doc.md
+++ b/src/packages/__VUE/layout/doc.md
@@ -59,3 +59,16 @@ Layout 组件提供 24 列栅格，通过在 Col 上添加 span 属性设置列
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
 | click | 点击时触发 | `event: MouseEvent` |
+
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  RowProps,
+  RowInstance,
+  ColProps,
+  ColInstance
+} from '@nutui/nutui';
+```
diff --git a/src/packages/__VUE/layout/doc.taro.md b/src/packages/__VUE/layout/doc.taro.md
index 9dc703b821..0de89a61b7 100644
--- a/src/packages/__VUE/layout/doc.taro.md
+++ b/src/packages/__VUE/layout/doc.taro.md
@@ -59,3 +59,16 @@ Layout 组件提供 24 列栅格，通过在 Col 上添加 span 属性设置列
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
 | click | 点击时触发 | `event: MouseEvent` |
+
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  RowProps,
+  RowInstance,
+  ColProps,
+  ColInstance
+} from '@nutui/nutui-taro';
+```
diff --git a/src/packages/__VUE/layout/index.taro.ts b/src/packages/__VUE/layout/index.taro.ts
new file mode 100644
index 0000000000..b691647603
--- /dev/null
+++ b/src/packages/__VUE/layout/index.taro.ts
@@ -0,0 +1,9 @@
+import Layout from './layout.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Layout);
+
+export type LayoutInstance = ComponentPublicInstance & InstanceType<typeof Layout>;
+
+export { Layout, Layout as default };
diff --git a/src/packages/__VUE/layout/index.ts b/src/packages/__VUE/layout/index.ts
new file mode 100644
index 0000000000..745e65f796
--- /dev/null
+++ b/src/packages/__VUE/layout/index.ts
@@ -0,0 +1,9 @@
+import Layout from './layout.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Layout);
+
+export type LayoutInstance = ComponentPublicInstance & InstanceType<typeof Layout>;
+
+export { Layout, Layout as default };
diff --git a/src/packages/__VUE/layout/index.taro.vue b/src/packages/__VUE/layout/layout.taro.vue
similarity index 100%
rename from src/packages/__VUE/layout/index.taro.vue
rename to src/packages/__VUE/layout/layout.taro.vue
diff --git a/src/packages/__VUE/layout/index.vue b/src/packages/__VUE/layout/layout.vue
similarity index 100%
rename from src/packages/__VUE/layout/index.vue
rename to src/packages/__VUE/layout/layout.vue
diff --git a/src/packages/__VUE/row/__tests__/index.spec.ts b/src/packages/__VUE/row/__tests__/index.spec.ts
index d2b8d6f292..45d33a907b 100644
--- a/src/packages/__VUE/row/__tests__/index.spec.ts
+++ b/src/packages/__VUE/row/__tests__/index.spec.ts
@@ -1,4 +1,4 @@
-import Row from '../index.vue';
+import Row from '../';
 import { mount } from '@vue/test-utils';
 
 test('should add "nut-row-flex-nowrap" class when wrap prop is false', () => {
diff --git a/src/packages/__VUE/row/index.taro.ts b/src/packages/__VUE/row/index.taro.ts
new file mode 100644
index 0000000000..cbee7fb47a
--- /dev/null
+++ b/src/packages/__VUE/row/index.taro.ts
@@ -0,0 +1,11 @@
+import Row from './row.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Row);
+
+export type { RowProps } from './row.taro.vue';
+
+export type RowInstance = ComponentPublicInstance & InstanceType<typeof Row>;
+
+export { Row, Row as default };
diff --git a/src/packages/__VUE/row/index.taro.vue b/src/packages/__VUE/row/index.taro.vue
deleted file mode 100644
index aae25577bf..0000000000
--- a/src/packages/__VUE/row/index.taro.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <view :class="classes">
-    <slot></slot>
-  </view>
-</template>
-<script lang="ts">
-import { provide, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { LAYOUT_KEY } from '../layout/types';
-const { create } = createComponent('row');
-
-export default create({
-  props: {
-    type: {
-      type: String,
-      default: ''
-    },
-    gutter: {
-      type: [String, Number],
-      default: ''
-    },
-    justify: {
-      type: String,
-      default: 'start'
-    },
-    align: {
-      type: String,
-      default: 'flex-start'
-    },
-    flexWrap: {
-      type: String,
-      default: 'nowrap'
-    }
-  },
-  setup(props) {
-    const prefixCls = 'nut-row';
-    provide(LAYOUT_KEY, props.gutter);
-    const getClass = (prefix: string, type: string) => {
-      return prefix ? (type ? `nut-row-${prefix}-${type}` : '') : `nut-row-${type}`;
-    };
-    const classes = computed(() => {
-      return [
-        prefixCls,
-        getClass('', props.type),
-        getClass('justify', props.justify),
-        getClass('align', props.align),
-        getClass('flex', props.flexWrap)
-      ];
-    });
-    return {
-      classes
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/row/index.ts b/src/packages/__VUE/row/index.ts
new file mode 100644
index 0000000000..31797af68a
--- /dev/null
+++ b/src/packages/__VUE/row/index.ts
@@ -0,0 +1,11 @@
+import Row from './row.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Row);
+
+export type { RowProps } from './row.vue';
+
+export type RowInstance = ComponentPublicInstance & InstanceType<typeof Row>;
+
+export { Row, Row as default };
diff --git a/src/packages/__VUE/row/index.vue b/src/packages/__VUE/row/index.vue
deleted file mode 100644
index aae25577bf..0000000000
--- a/src/packages/__VUE/row/index.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <view :class="classes">
-    <slot></slot>
-  </view>
-</template>
-<script lang="ts">
-import { provide, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { LAYOUT_KEY } from '../layout/types';
-const { create } = createComponent('row');
-
-export default create({
-  props: {
-    type: {
-      type: String,
-      default: ''
-    },
-    gutter: {
-      type: [String, Number],
-      default: ''
-    },
-    justify: {
-      type: String,
-      default: 'start'
-    },
-    align: {
-      type: String,
-      default: 'flex-start'
-    },
-    flexWrap: {
-      type: String,
-      default: 'nowrap'
-    }
-  },
-  setup(props) {
-    const prefixCls = 'nut-row';
-    provide(LAYOUT_KEY, props.gutter);
-    const getClass = (prefix: string, type: string) => {
-      return prefix ? (type ? `nut-row-${prefix}-${type}` : '') : `nut-row-${type}`;
-    };
-    const classes = computed(() => {
-      return [
-        prefixCls,
-        getClass('', props.type),
-        getClass('justify', props.justify),
-        getClass('align', props.align),
-        getClass('flex', props.flexWrap)
-      ];
-    });
-    return {
-      classes
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/row/row.taro.vue b/src/packages/__VUE/row/row.taro.vue
new file mode 100644
index 0000000000..82e2d68ffd
--- /dev/null
+++ b/src/packages/__VUE/row/row.taro.vue
@@ -0,0 +1,44 @@
+<template>
+  <view :class="classes">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { provide, computed } from 'vue';
+import { LAYOUT_KEY } from '../layout/types';
+
+defineOptions({
+  name: 'NutRow'
+});
+
+export type RowProps = Partial<{
+  type: string;
+  gutter: string | number;
+  justify: string;
+  align: string;
+  flexWrap: string;
+}>;
+
+const props = withDefaults(defineProps<RowProps>(), {
+  type: '',
+  gutter: '',
+  justify: 'start',
+  align: 'flex-start',
+  flexWrap: 'nowrap'
+});
+
+const prefixCls = 'nut-row';
+provide(LAYOUT_KEY, props.gutter);
+const getClass = (prefix: string, type: string) => {
+  return prefix ? (type ? `nut-row-${prefix}-${type}` : '') : `nut-row-${type}`;
+};
+const classes = computed(() => {
+  return [
+    prefixCls,
+    getClass('', props.type),
+    getClass('justify', props.justify),
+    getClass('align', props.align),
+    getClass('flex', props.flexWrap)
+  ];
+});
+</script>
diff --git a/src/packages/__VUE/row/row.vue b/src/packages/__VUE/row/row.vue
new file mode 100644
index 0000000000..82e2d68ffd
--- /dev/null
+++ b/src/packages/__VUE/row/row.vue
@@ -0,0 +1,44 @@
+<template>
+  <view :class="classes">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { provide, computed } from 'vue';
+import { LAYOUT_KEY } from '../layout/types';
+
+defineOptions({
+  name: 'NutRow'
+});
+
+export type RowProps = Partial<{
+  type: string;
+  gutter: string | number;
+  justify: string;
+  align: string;
+  flexWrap: string;
+}>;
+
+const props = withDefaults(defineProps<RowProps>(), {
+  type: '',
+  gutter: '',
+  justify: 'start',
+  align: 'flex-start',
+  flexWrap: 'nowrap'
+});
+
+const prefixCls = 'nut-row';
+provide(LAYOUT_KEY, props.gutter);
+const getClass = (prefix: string, type: string) => {
+  return prefix ? (type ? `nut-row-${prefix}-${type}` : '') : `nut-row-${type}`;
+};
+const classes = computed(() => {
+  return [
+    prefixCls,
+    getClass('', props.type),
+    getClass('justify', props.justify),
+    getClass('align', props.align),
+    getClass('flex', props.flexWrap)
+  ];
+});
+</script>