diff --git a/src/config.json b/src/config.json
index 3170008920..32d56561ab 100644
--- a/src/config.json
+++ b/src/config.json
@@ -184,6 +184,7 @@
           "name": "Grid",
           "cName": "宫格",
           "desc": "用于分隔成等宽区块进行页面导航",
+          "setup": true,
           "author": "haiweilian"
         },
         {
@@ -192,6 +193,7 @@
           "cName": "宫格子组件",
           "desc": "",
           "show": false,
+          "setup": true,
           "author": "haiweilian"
         },
         {
diff --git a/src/packages/__VUE/grid/common.ts b/src/packages/__VUE/grid/common.ts
deleted file mode 100644
index 2fd6d9d4d6..0000000000
--- a/src/packages/__VUE/grid/common.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { h, computed } from 'vue'
-import type { ExtractPropTypes, SetupContext, RenderFunction } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { pxCheck } from '@/packages/utils/pxCheck'
-import { useProvide } from '@/packages/utils/useRelation/useProvide'
-
-const { componentName } = createComponent('grid')
-
-export const GRID_KEY = Symbol('grid')
-
-export type GridDirection = 'horizontal' | 'vertical'
-
-export const gridProps = {
-  // 列数
-  columnNum: {
-    type: [Number, String],
-    default: 4
-  },
-  // 是否显示边框
-  border: {
-    type: Boolean,
-    default: true
-  },
-  // 格子之间间隔距离
-  gutter: {
-    type: [Number, String],
-    default: 0
-  },
-  // 是否内容居中
-  center: {
-    type: Boolean,
-    default: true
-  },
-  // 是否固定正方形
-  square: {
-    type: Boolean,
-    default: false
-  },
-  // 内容与文字翻转
-  reverse: {
-    type: Boolean,
-    default: false
-  },
-  // 内容排列方向
-  direction: {
-    type: String as import('vue').PropType<GridDirection>
-  },
-  // 是否开启点击反馈
-  clickable: {
-    type: Boolean,
-    default: false
-  }
-}
-
-export type GridProps = ExtractPropTypes<typeof gridProps>
-
-export const component = {
-  props: gridProps,
-  setup(props: GridProps, { slots }: SetupContext): RenderFunction {
-    useProvide(GRID_KEY, `NutGridItem`)({ props })
-
-    const rootClass = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--border`]: props.border && !props.gutter
-      }
-    })
-
-    const rootStyle = computed(() => {
-      const style: import('vue').CSSProperties = {}
-
-      if (props.gutter) {
-        style.paddingLeft = pxCheck(props.gutter)
-      }
-
-      return style
-    })
-
-    return () => {
-      return h(
-        'view',
-        {
-          class: rootClass.value,
-          style: rootStyle.value
-        },
-        slots.default?.()
-      )
-    }
-  }
-}
diff --git a/src/packages/__VUE/grid/doc.en-US.md b/src/packages/__VUE/grid/doc.en-US.md
index 25fa00fb43..c7be1f2a60 100644
--- a/src/packages/__VUE/grid/doc.en-US.md
+++ b/src/packages/__VUE/grid/doc.en-US.md
@@ -77,6 +77,18 @@ app.use(GridItem)
 | --- | --- | --- |
 | click | Emitted when component is clicked | event: Event |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  GridDirection,
+  GridProps,
+  GridInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/grid/doc.md b/src/packages/__VUE/grid/doc.md
index ffb294b75c..ac97308822 100644
--- a/src/packages/__VUE/grid/doc.md
+++ b/src/packages/__VUE/grid/doc.md
@@ -77,6 +77,18 @@ app.use(GridItem)
 | --- | --- | --- |
 | click | 点击格子时触发 | event: Event |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  GridDirection,
+  GridProps,
+  GridInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/grid/doc.taro.md b/src/packages/__VUE/grid/doc.taro.md
index d9379030f0..826e2b1517 100644
--- a/src/packages/__VUE/grid/doc.taro.md
+++ b/src/packages/__VUE/grid/doc.taro.md
@@ -77,6 +77,18 @@ app.use(GridItem)
 | --- | --- | --- |
 | click | 点击格子时触发 | event: Event |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  GridDirection,
+  GridProps,
+  GridInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/grid/grid.taro.vue b/src/packages/__VUE/grid/grid.taro.vue
new file mode 100644
index 0000000000..c07d36505b
--- /dev/null
+++ b/src/packages/__VUE/grid/grid.taro.vue
@@ -0,0 +1,54 @@
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { pxCheck, useChildren } from '@/packages/utils'
+import { GRID_KEY, type GridDirection } from './types'
+import { computed, type CSSProperties } from 'vue'
+
+defineOptions({
+  name: 'NutGrid'
+})
+
+export type GridProps = Partial<{
+  columnNum: string | number
+  border: boolean
+  gutter: string | number
+  center: boolean
+  square: boolean
+  reverse: boolean
+  direction: GridDirection
+  clickable: boolean
+}>
+
+const props = withDefaults(defineProps<GridProps>(), {
+  columnNum: 4,
+  border: true,
+  gutter: 0,
+  center: true,
+  square: false,
+  reverse: false,
+  clickable: false
+})
+
+const { linkChildren } = useChildren(GRID_KEY)
+linkChildren({ props })
+
+const rootClass = computed(() => {
+  const prefixCls = 'nut-grid'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--border`]: props.border && !props.gutter
+  }
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.gutter) {
+    style.paddingLeft = pxCheck(props.gutter)
+  }
+  return style
+})
+</script>
diff --git a/src/packages/__VUE/grid/grid.vue b/src/packages/__VUE/grid/grid.vue
new file mode 100644
index 0000000000..c07d36505b
--- /dev/null
+++ b/src/packages/__VUE/grid/grid.vue
@@ -0,0 +1,54 @@
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { pxCheck, useChildren } from '@/packages/utils'
+import { GRID_KEY, type GridDirection } from './types'
+import { computed, type CSSProperties } from 'vue'
+
+defineOptions({
+  name: 'NutGrid'
+})
+
+export type GridProps = Partial<{
+  columnNum: string | number
+  border: boolean
+  gutter: string | number
+  center: boolean
+  square: boolean
+  reverse: boolean
+  direction: GridDirection
+  clickable: boolean
+}>
+
+const props = withDefaults(defineProps<GridProps>(), {
+  columnNum: 4,
+  border: true,
+  gutter: 0,
+  center: true,
+  square: false,
+  reverse: false,
+  clickable: false
+})
+
+const { linkChildren } = useChildren(GRID_KEY)
+linkChildren({ props })
+
+const rootClass = computed(() => {
+  const prefixCls = 'nut-grid'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--border`]: props.border && !props.gutter
+  }
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.gutter) {
+    style.paddingLeft = pxCheck(props.gutter)
+  }
+  return style
+})
+</script>
diff --git a/src/packages/__VUE/grid/index.taro.ts b/src/packages/__VUE/grid/index.taro.ts
new file mode 100644
index 0000000000..baaf9e07f8
--- /dev/null
+++ b/src/packages/__VUE/grid/index.taro.ts
@@ -0,0 +1,13 @@
+import Grid from './grid.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Grid)
+
+export type { GridProps } from './grid.taro.vue'
+
+export type { GridDirection } from './types'
+
+export type GridInstance = ComponentPublicInstance & InstanceType<typeof Grid>
+
+export { Grid, Grid as default }
diff --git a/src/packages/__VUE/grid/index.taro.vue b/src/packages/__VUE/grid/index.taro.vue
deleted file mode 100644
index 933436d2cf..0000000000
--- a/src/packages/__VUE/grid/index.taro.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<script lang="ts">
-import { createComponent } from '@/packages/utils/create'
-import { component } from './common'
-const { create } = createComponent('grid')
-export default create(component)
-</script>
diff --git a/src/packages/__VUE/grid/index.ts b/src/packages/__VUE/grid/index.ts
new file mode 100644
index 0000000000..12ad6bef6a
--- /dev/null
+++ b/src/packages/__VUE/grid/index.ts
@@ -0,0 +1,13 @@
+import Grid from './grid.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Grid)
+
+export type { GridProps } from './grid.vue'
+
+export type { GridDirection } from './types'
+
+export type GridInstance = ComponentPublicInstance & InstanceType<typeof Grid>
+
+export { Grid, Grid as default }
diff --git a/src/packages/__VUE/grid/index.vue b/src/packages/__VUE/grid/index.vue
deleted file mode 100644
index 933436d2cf..0000000000
--- a/src/packages/__VUE/grid/index.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<script lang="ts">
-import { createComponent } from '@/packages/utils/create'
-import { component } from './common'
-const { create } = createComponent('grid')
-export default create(component)
-</script>
diff --git a/src/packages/__VUE/grid/types.ts b/src/packages/__VUE/grid/types.ts
new file mode 100644
index 0000000000..a5f56dc3fb
--- /dev/null
+++ b/src/packages/__VUE/grid/types.ts
@@ -0,0 +1,2 @@
+export const GRID_KEY = Symbol('grid')
+export type GridDirection = 'horizontal' | 'vertical'
diff --git a/src/packages/__VUE/griditem/grid-item.taro.vue b/src/packages/__VUE/griditem/grid-item.taro.vue
new file mode 100644
index 0000000000..0f79e35aef
--- /dev/null
+++ b/src/packages/__VUE/griditem/grid-item.taro.vue
@@ -0,0 +1,65 @@
+<template>
+  <view class="nut-grid-item" :style="rootStyle" @click="handleClick">
+    <view :class="contentClass">
+      <slot></slot>
+      <view class="nut-grid-item__text">
+        <template v-if="text">{{ text }}</template>
+        <slot v-else name="text"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from 'vue'
+import { pxCheck, useParent } from '@/packages/utils'
+import { GRID_KEY } from '../grid/types'
+
+defineOptions({
+  name: 'NutGridItem'
+})
+
+export type GridItemProps = Partial<{
+  text: string
+}>
+
+withDefaults(defineProps<GridItemProps>(), {})
+
+const emit = defineEmits(['click'])
+
+const { parent: parentObj, index } = useParent(GRID_KEY)
+const parent = parentObj?.props || {}
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    flexBasis: `${100 / +parent.columnNum}%`
+  }
+  if (parent.square) {
+    style.paddingTop = `${100 / +parent.columnNum}%`
+  } else if (parent.gutter) {
+    style.paddingRight = pxCheck(parent.gutter)
+    if (index.value >= +parent.columnNum) {
+      style.marginTop = pxCheck(parent.gutter)
+    }
+  }
+  return style
+})
+
+const contentClass = computed(() => {
+  const prefixCls = `nut-grid-item__content`
+  return {
+    [`${prefixCls}`]: true,
+    [`${prefixCls}--border`]: parent.border,
+    [`${prefixCls}--surround`]: parent.border && parent.gutter,
+    [`${prefixCls}--center`]: parent.center,
+    [`${prefixCls}--square`]: parent.square,
+    [`${prefixCls}--reverse`]: parent.reverse,
+    [`${prefixCls}--${parent.direction}`]: !!parent.direction,
+    [`${prefixCls}--clickable`]: parent.clickable
+  }
+})
+
+const handleClick = (event: Event) => {
+  emit('click', event)
+}
+</script>
diff --git a/src/packages/__VUE/griditem/grid-item.vue b/src/packages/__VUE/griditem/grid-item.vue
new file mode 100644
index 0000000000..aa965bbde2
--- /dev/null
+++ b/src/packages/__VUE/griditem/grid-item.vue
@@ -0,0 +1,87 @@
+<template>
+  <view class="nut-grid-item" :style="rootStyle" @click="handleClick">
+    <view :class="contentClass">
+      <slot></slot>
+      <view class="nut-grid-item__text">
+        <template v-if="text">{{ text }}</template>
+        <slot v-else name="text"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from 'vue'
+import { pxCheck, useParent, useRouter } from '@/packages/utils'
+import { GRID_KEY } from '../grid/types'
+
+defineOptions({
+  name: 'NutGridItem'
+})
+
+export type GridItemProps = Partial<{
+  text: string
+  /**
+   * @deprecated It will be removed in next major version.
+   */
+  to: string | object
+  /**
+   * @deprecated It will be removed in next major version.
+   */
+  url: string
+  /**
+   * @deprecated It will be removed in next major version.
+   */
+  replace: boolean
+}>
+
+const props = withDefaults(defineProps<GridItemProps>(), {
+  url: '',
+  replace: false
+})
+
+const emit = defineEmits(['click'])
+
+const { parent: parentObj, index } = useParent(GRID_KEY)
+const parent = parentObj?.props || {}
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    flexBasis: `${100 / +parent.columnNum}%`
+  }
+  if (parent.square) {
+    style.paddingTop = `${100 / +parent.columnNum}%`
+  } else if (parent.gutter) {
+    style.paddingRight = pxCheck(parent.gutter)
+    if (index.value >= +parent.columnNum) {
+      style.marginTop = pxCheck(parent.gutter)
+    }
+  }
+  return style
+})
+
+const contentClass = computed(() => {
+  const prefixCls = `nut-grid-item__content`
+  return {
+    [`${prefixCls}`]: true,
+    [`${prefixCls}--border`]: parent.border,
+    [`${prefixCls}--surround`]: parent.border && parent.gutter,
+    [`${prefixCls}--center`]: parent.center,
+    [`${prefixCls}--square`]: parent.square,
+    [`${prefixCls}--reverse`]: parent.reverse,
+    [`${prefixCls}--${parent.direction}`]: !!parent.direction,
+    [`${prefixCls}--clickable`]: parent.clickable || props.to || props.url
+  }
+})
+
+const router = useRouter()
+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/griditem/index.taro.ts b/src/packages/__VUE/griditem/index.taro.ts
new file mode 100644
index 0000000000..ee8591ca0c
--- /dev/null
+++ b/src/packages/__VUE/griditem/index.taro.ts
@@ -0,0 +1,11 @@
+import GridItem from './grid-item.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(GridItem)
+
+export type { GridItemProps } from './grid-item.taro.vue'
+
+export type GridItemInstance = ComponentPublicInstance & InstanceType<typeof GridItem>
+
+export { GridItem, GridItem as default }
diff --git a/src/packages/__VUE/griditem/index.taro.vue b/src/packages/__VUE/griditem/index.taro.vue
deleted file mode 100644
index 0155eb6d04..0000000000
--- a/src/packages/__VUE/griditem/index.taro.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <view :class="rootClass" :style="rootStyle" @click="handleClick">
-    <view :class="contentClass">
-      <slot></slot>
-      <view class="nut-grid-item__text">
-        <template v-if="text">{{ text }}</template>
-        <slot v-else name="text"></slot>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import { computed, CSSProperties } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { pxCheck } from '@/packages/utils/pxCheck'
-import { useInject } from '@/packages/utils/useRelation/useInject'
-import { GRID_KEY, GridProps } from '../grid/common'
-const { create, componentName } = createComponent('grid-item')
-
-export default create({
-  props: {
-    text: {
-      type: String
-    }
-    // router
-    // to: {
-    //   type: [String, Object]
-    // },
-    // url: {
-    //   type: String,
-    //   default: ''
-    // },
-    // replace: {
-    //   type: Boolean,
-    //   default: false
-    // }
-  },
-  emits: ['click'],
-  setup(props, { emit }) {
-    const Parent = useInject<{ props: Required<GridProps> }>(GRID_KEY)
-    if (!Parent.parent) return {} as any
-    const index = Parent.index
-    const parent = Parent.parent.props
-
-    // root
-    const rootClass = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true
-      }
-    })
-
-    const rootStyle = computed(() => {
-      const style: CSSProperties = {
-        flexBasis: `${100 / +parent.columnNum}%`
-      }
-
-      if (parent.square) {
-        style.paddingTop = `${100 / +parent.columnNum}%`
-      } else if (parent.gutter) {
-        style.paddingRight = pxCheck(parent.gutter)
-        if (index.value >= +parent.columnNum) {
-          style.marginTop = pxCheck(parent.gutter)
-        }
-      }
-
-      return style
-    })
-
-    // content
-    const contentClass = computed(() => {
-      const prefixCls = `${componentName}__content`
-      return {
-        [`${prefixCls}`]: true,
-        [`${prefixCls}--border`]: parent.border,
-        [`${prefixCls}--surround`]: parent.border && parent.gutter,
-        [`${prefixCls}--center`]: parent.center,
-        [`${prefixCls}--square`]: parent.square,
-        [`${prefixCls}--reverse`]: parent.reverse,
-        [`${prefixCls}--${parent.direction}`]: !!parent.direction,
-        [`${prefixCls}--clickable`]: parent.clickable
-      }
-    })
-
-    // click
-    const handleClick = (event: Event) => {
-      emit('click', event)
-    }
-
-    return {
-      rootClass,
-      rootStyle,
-      contentClass,
-      handleClick
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/griditem/index.ts b/src/packages/__VUE/griditem/index.ts
new file mode 100644
index 0000000000..32c56bc187
--- /dev/null
+++ b/src/packages/__VUE/griditem/index.ts
@@ -0,0 +1,11 @@
+import GridItem from './grid-item.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(GridItem)
+
+export type { GridItemProps } from './grid-item.vue'
+
+export type GridItemInstance = ComponentPublicInstance & InstanceType<typeof GridItem>
+
+export { GridItem, GridItem as default }
diff --git a/src/packages/__VUE/griditem/index.vue b/src/packages/__VUE/griditem/index.vue
deleted file mode 100644
index 722440d54a..0000000000
--- a/src/packages/__VUE/griditem/index.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <view :class="rootClass" :style="rootStyle" @click="handleClick">
-    <view :class="contentClass">
-      <slot></slot>
-      <view class="nut-grid-item__text">
-        <template v-if="text">{{ text }}</template>
-        <slot v-else name="text"></slot>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import { computed, CSSProperties } from 'vue'
-import { useRouter } from '@/packages/utils/useRoute'
-import { createComponent } from '@/packages/utils/create'
-import { pxCheck } from '@/packages/utils/pxCheck'
-import { useInject } from '@/packages/utils/useRelation/useInject'
-import { GRID_KEY, GridProps } from '../grid/common'
-const { create, componentName } = createComponent('grid-item')
-
-export default create({
-  props: {
-    text: {
-      type: String
-    },
-    // router
-    to: {
-      type: [String, Object]
-    },
-    url: {
-      type: String,
-      default: ''
-    },
-    replace: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click'],
-  setup(props, { emit }) {
-    const Parent = useInject<{ props: Required<GridProps> }>(GRID_KEY)
-    if (!Parent.parent) return {} as any
-    const index = Parent.index
-    const parent = Parent.parent.props
-
-    // root
-    const rootClass = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true
-      }
-    })
-
-    const rootStyle = computed(() => {
-      const style: CSSProperties = {
-        flexBasis: `${100 / +parent.columnNum}%`
-      }
-
-      if (parent.square) {
-        style.paddingTop = `${100 / +parent.columnNum}%`
-      } else if (parent.gutter) {
-        style.paddingRight = pxCheck(parent.gutter)
-        if (index.value >= +parent.columnNum) {
-          style.marginTop = pxCheck(parent.gutter)
-        }
-      }
-
-      return style
-    })
-
-    // content
-    const contentClass = computed(() => {
-      const prefixCls = `${componentName}__content`
-      return {
-        [`${prefixCls}`]: true,
-        [`${prefixCls}--border`]: parent.border,
-        [`${prefixCls}--surround`]: parent.border && parent.gutter,
-        [`${prefixCls}--center`]: parent.center,
-        [`${prefixCls}--square`]: parent.square,
-        [`${prefixCls}--reverse`]: parent.reverse,
-        [`${prefixCls}--${parent.direction}`]: !!parent.direction,
-        [`${prefixCls}--clickable`]: parent.clickable || props.to || props.url
-      }
-    })
-
-    // click
-    const router = useRouter()
-    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 {
-      rootClass,
-      rootStyle,
-      contentClass,
-      handleClick
-    }
-  }
-})
-</script>
diff --git a/src/packages/utils/index.ts b/src/packages/utils/index.ts
index e44ec2c57b..97f652aef8 100644
--- a/src/packages/utils/index.ts
+++ b/src/packages/utils/index.ts
@@ -1,3 +1,5 @@
 export * from './useRelation'
 export * from './with-install'
 export * from './util'
+export * from './pxCheck'
+export * from './useRoute'