diff --git a/src/config.json b/src/config.json
index 455198a7e9..3391f0aace 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1000,6 +1000,7 @@
           "cName": "价格",
           "type": "component",
           "show": true,
+          "setup": true,
           "desc": "价格组件",
           "author": "ailululu"
         },
diff --git a/src/packages/__VUE/card/index.taro.vue b/src/packages/__VUE/card/index.taro.vue
index a6b602cee9..318aead9f5 100644
--- a/src/packages/__VUE/card/index.taro.vue
+++ b/src/packages/__VUE/card/index.taro.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import NutPrice from '../price/index.taro.vue';
+import NutPrice from '../price/index.taro';
 import NutTag from '../tag/index.taro.vue';
 const { create } = createComponent('card');
 export default create({
diff --git a/src/packages/__VUE/card/index.vue b/src/packages/__VUE/card/index.vue
index 5e6f3e38ca..f683a977d0 100644
--- a/src/packages/__VUE/card/index.vue
+++ b/src/packages/__VUE/card/index.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import NutPrice from '../price/index.vue';
+import NutPrice from '../price';
 import NutTag from '../tag/index.vue';
 const { create } = createComponent('card');
 export default create({
diff --git a/src/packages/__VUE/price/__tests__/price.spec.ts b/src/packages/__VUE/price/__tests__/price.spec.ts
index b0ec5d4e07..95a365e9f4 100644
--- a/src/packages/__VUE/price/__tests__/price.spec.ts
+++ b/src/packages/__VUE/price/__tests__/price.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Price from '../index.vue';
+import Price from '../';
 
 test('Price: base price', () => {
   const wrapper = mount(Price, {
@@ -49,7 +49,8 @@ test('Price: symbol props', () => {
 test('Price: size props', () => {
   const wrapper = mount(Price, {
     props: {
-      size: 'small'
+      size: 'small',
+      position: 'after'
     }
   });
   const price: any = wrapper.find('.nut-price');
diff --git a/src/packages/__VUE/price/doc.en-US.md b/src/packages/__VUE/price/doc.en-US.md
index b953d5e885..d67ec6aa7c 100644
--- a/src/packages/__VUE/price/doc.en-US.md
+++ b/src/packages/__VUE/price/doc.en-US.md
@@ -63,6 +63,19 @@ size: `small`, `normal`, `large`
 | size | Size，`small`、`normal`、`large` | string | `normal` |
 | strike-through`v4.0.3` | strike-through | Boolean | false |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  PriceSize,
+  PricePosition,
+  PriceProps,
+  PriceInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/price/doc.md b/src/packages/__VUE/price/doc.md
index 9a3ac10cc5..e5d8d3b8e1 100644
--- a/src/packages/__VUE/price/doc.md
+++ b/src/packages/__VUE/price/doc.md
@@ -63,6 +63,19 @@ app.use(Price);
 | size | 价格尺寸，`small`、`normal`、`large` | string | `normal` |
 | strike-through`v4.0.3` | 是否展示划线价 | Boolean | false |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  PriceSize,
+  PricePosition,
+  PriceProps,
+  PriceInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/price/doc.taro.md b/src/packages/__VUE/price/doc.taro.md
index 4293a58d1a..9376e4c3e4 100644
--- a/src/packages/__VUE/price/doc.taro.md
+++ b/src/packages/__VUE/price/doc.taro.md
@@ -63,6 +63,19 @@ app.use(Price);
 | size | 价格尺寸，`small`、`normal`、`large` | string | `normal` |
 | strike-through`v4.0.3` | 是否展示划线价 | Boolean | false |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  PriceSize,
+  PricePosition,
+  PriceProps,
+  PriceInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/price/index.taro.ts b/src/packages/__VUE/price/index.taro.ts
new file mode 100644
index 0000000000..a9e9bb82aa
--- /dev/null
+++ b/src/packages/__VUE/price/index.taro.ts
@@ -0,0 +1,13 @@
+import Price from './price.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Price);
+
+export type { PriceProps } from './price.taro.vue';
+
+export type { PriceSize, PricePosition } from './types';
+
+export type PriceInstance = ComponentPublicInstance & InstanceType<typeof Price>;
+
+export { Price, Price as default };
diff --git a/src/packages/__VUE/price/index.taro.vue b/src/packages/__VUE/price/index.taro.vue
deleted file mode 100644
index 209000cb0e..0000000000
--- a/src/packages/__VUE/price/index.taro.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-  <view :class="classes">
-    <view
-      v-if="needSymbol && position === 'before'"
-      class="nut-price--symbol"
-      :class="`nut-price--symbol-${size}`"
-      v-html="showSymbol"
-    ></view>
-    <view :class="`nut-price--${size}`">
-      {{ formatThousands(price) }}
-    </view>
-    <view v-if="decimalDigits != 0" :class="`nut-price--decimal-${size}`">.</view>
-    <view :class="`nut-price--decimal-${size}`">
-      {{ formatDecimal(price) }}
-    </view>
-    <view
-      v-if="needSymbol && position === 'after'"
-      class="nut-price--symbol"
-      :class="`nut-price--symbol-${size}`"
-      v-html="showSymbol"
-    ></view>
-  </view>
-</template>
-
-<script lang="ts">
-import { PropType, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { PricePosition, PriceSize } from './types';
-const { componentName, create } = createComponent('price');
-
-export default create({
-  props: {
-    price: {
-      type: [Number, String],
-      default: 0
-    },
-    needSymbol: {
-      type: Boolean,
-      default: true
-    },
-    symbol: {
-      type: String,
-      default: '&yen;'
-    },
-    decimalDigits: {
-      type: Number,
-      default: 2
-    },
-    thousands: {
-      type: Boolean,
-      default: false
-    },
-    position: {
-      type: String as PropType<PricePosition>,
-      default: 'before'
-    },
-    size: {
-      type: String as PropType<PriceSize>,
-      default: 'normal'
-    },
-    strikeThrough: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  setup(props) {
-    const classes = computed(() => {
-      return {
-        [componentName]: true,
-        [`${componentName}--strike`]: props.strikeThrough
-      };
-    });
-    const replaceSpecialChar = (url: string) => {
-      url = url.replace(/&quot;/g, '"');
-      url = url.replace(/&amp;/g, '&');
-      url = url.replace(/&lt;/g, '<');
-      url = url.replace(/&gt;/g, '>');
-      url = url.replace(/&nbsp;/g, ' ');
-      url = url.replace(/&yen;/g, '￥');
-      return url;
-    };
-    const showSymbol = computed(() => {
-      const symbol = props.needSymbol ? replaceSpecialChar(props.symbol) : '';
-      return symbol;
-    });
-    const checkPoint = (price: string | number) => {
-      return String(price).indexOf('.') > 0;
-    };
-
-    const formatThousands = (num: any) => {
-      if (Number(num) == 0) {
-        num = 0;
-      }
-      if (checkPoint(num)) {
-        num = Number(num).toFixed(props.decimalDigits);
-        num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0];
-      } else {
-        num = num.toString();
-      }
-      if (props.thousands) {
-        return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
-      } else {
-        return num;
-      }
-    };
-    const formatDecimal = (decimalNum: any) => {
-      if (Number(decimalNum) == 0) {
-        decimalNum = 0;
-      }
-      if (checkPoint(decimalNum)) {
-        decimalNum = Number(decimalNum).toFixed(props.decimalDigits);
-        decimalNum =
-          typeof decimalNum.split('.') === 'string' ? 0 : decimalNum.split('.')[1] ? decimalNum.split('.')[1] : 0;
-      } else {
-        decimalNum = 0;
-      }
-      const result = '0.' + decimalNum;
-      const resultFixed = Number(result).toFixed(props.decimalDigits);
-      return String(resultFixed).substring(2, resultFixed.length);
-    };
-    return {
-      classes,
-      showSymbol,
-      checkPoint,
-      formatThousands,
-      formatDecimal
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/price/index.ts b/src/packages/__VUE/price/index.ts
new file mode 100644
index 0000000000..d22700e316
--- /dev/null
+++ b/src/packages/__VUE/price/index.ts
@@ -0,0 +1,13 @@
+import Price from './price.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Price);
+
+export type { PriceProps } from './price.vue';
+
+export type { PriceSize, PricePosition } from './types';
+
+export type PriceInstance = ComponentPublicInstance & InstanceType<typeof Price>;
+
+export { Price, Price as default };
diff --git a/src/packages/__VUE/price/index.vue b/src/packages/__VUE/price/index.vue
deleted file mode 100644
index 3ef85cb155..0000000000
--- a/src/packages/__VUE/price/index.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <view :class="classes">
-    <view
-      v-if="needSymbol && position === 'before'"
-      class="nut-price--symbol"
-      :class="`nut-price--symbol-${size}`"
-      v-html="showSymbol"
-    ></view>
-    <view :class="`nut-price--${size}`">
-      {{ formatThousands(price) }}
-    </view>
-    <view v-if="decimalDigits != 0" :class="`nut-price--decimal-${size}`">.</view>
-    <view :class="`nut-price--decimal-${size}`">
-      {{ formatDecimal(price) }}
-    </view>
-    <view
-      v-if="needSymbol && position === 'after'"
-      class="nut-price--symbol"
-      :class="`nut-price--symbol-${size}`"
-      v-html="showSymbol"
-    ></view>
-  </view>
-</template>
-
-<script lang="ts">
-import { PropType, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { PricePosition, PriceSize } from './types';
-const { componentName, create } = createComponent('price');
-
-export default create({
-  props: {
-    price: {
-      type: [Number, String],
-      default: 0
-    },
-    needSymbol: {
-      type: Boolean,
-      default: true
-    },
-    symbol: {
-      type: String,
-      default: '&yen;'
-    },
-    decimalDigits: {
-      type: Number,
-      default: 2
-    },
-    thousands: {
-      type: Boolean,
-      default: false
-    },
-    position: {
-      type: String as PropType<PricePosition>,
-      default: 'before'
-    },
-    size: {
-      type: String as PropType<PriceSize>,
-      default: 'normal'
-    },
-    strikeThrough: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  setup(props) {
-    const classes = computed(() => {
-      return {
-        [componentName]: true,
-        [`${componentName}--strike`]: props.strikeThrough
-      };
-    });
-    const showSymbol = computed(() => {
-      const symbol = props.needSymbol ? props.symbol : '';
-      return symbol;
-    });
-    const checkPoint = (price: string | number) => {
-      return String(price).indexOf('.') > 0;
-    };
-
-    const formatThousands = (num: any) => {
-      if (Number(num) == 0) {
-        num = 0;
-      }
-      if (checkPoint(num)) {
-        num = Number(num).toFixed(props.decimalDigits);
-        num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0];
-      } else {
-        num = num.toString();
-      }
-      if (props.thousands) {
-        return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
-      } else {
-        return num;
-      }
-    };
-    const formatDecimal = (decimalNum: any) => {
-      if (Number(decimalNum) == 0) {
-        decimalNum = 0;
-      }
-      if (checkPoint(decimalNum)) {
-        decimalNum = Number(decimalNum).toFixed(props.decimalDigits);
-        decimalNum =
-          typeof decimalNum.split('.') === 'string' ? 0 : decimalNum.split('.')[1] ? decimalNum.split('.')[1] : 0;
-      } else {
-        decimalNum = 0;
-      }
-      const result = '0.' + decimalNum;
-      const resultFixed = Number(result).toFixed(props.decimalDigits);
-      return String(resultFixed).substring(2, resultFixed.length);
-    };
-    return {
-      classes,
-      showSymbol,
-      checkPoint,
-      formatThousands,
-      formatDecimal
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/price/price.taro.vue b/src/packages/__VUE/price/price.taro.vue
new file mode 100644
index 0000000000..09d2624b16
--- /dev/null
+++ b/src/packages/__VUE/price/price.taro.vue
@@ -0,0 +1,110 @@
+<template>
+  <view :class="classes">
+    <view
+      v-if="needSymbol && position === 'before'"
+      class="nut-price--symbol"
+      :class="`nut-price--symbol-${size}`"
+      v-html="showSymbol"
+    ></view>
+    <view :class="`nut-price--${size}`">
+      {{ formatThousands(price) }}
+    </view>
+    <view v-if="decimalDigits != 0" :class="`nut-price--decimal-${size}`">.</view>
+    <view :class="`nut-price--decimal-${size}`">
+      {{ formatDecimal(price) }}
+    </view>
+    <view
+      v-if="needSymbol && position === 'after'"
+      class="nut-price--symbol"
+      :class="`nut-price--symbol-${size}`"
+      v-html="showSymbol"
+    ></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { PricePosition, PriceSize } from './types';
+
+defineOptions({
+  name: 'NutPrice'
+});
+
+export type PriceProps = Partial<{
+  price: string | number;
+  needSymbol: boolean;
+  symbol: string;
+  decimalDigits: number;
+  thousands: boolean;
+  position: PricePosition;
+  size: PriceSize;
+  strikeThrough: boolean;
+}>;
+
+const props = withDefaults(defineProps<PriceProps>(), {
+  price: 0,
+  needSymbol: true,
+  symbol: '&yen;',
+  decimalDigits: 2,
+  thousands: false,
+  position: 'before',
+  size: 'normal',
+  strikeThrough: false
+});
+
+const prefix = 'nut-price';
+const classes = computed(() => {
+  return {
+    [prefix]: true,
+    [`${prefix}--strike`]: props.strikeThrough
+  };
+});
+const replaceSpecialChar = (url: string) => {
+  url = url.replace(/&quot;/g, '"');
+  url = url.replace(/&amp;/g, '&');
+  url = url.replace(/&lt;/g, '<');
+  url = url.replace(/&gt;/g, '>');
+  url = url.replace(/&nbsp;/g, ' ');
+  url = url.replace(/&yen;/g, '￥');
+  return url;
+};
+const showSymbol = computed(() => {
+  const symbol = props.needSymbol ? replaceSpecialChar(props.symbol) : '';
+  return symbol;
+});
+const checkPoint = (price: string | number) => {
+  return String(price).indexOf('.') > 0;
+};
+
+const formatThousands = (num: any) => {
+  if (Number(num) == 0) {
+    num = 0;
+  }
+  if (checkPoint(num)) {
+    num = Number(num).toFixed(props.decimalDigits);
+    num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0];
+  } else {
+    num = num.toString();
+  }
+  if (props.thousands) {
+    return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
+  } else {
+    return num;
+  }
+};
+const formatDecimal = (decimalNum: any) => {
+  if (Number(decimalNum) == 0) {
+    decimalNum = 0;
+  }
+  if (checkPoint(decimalNum)) {
+    decimalNum = Number(decimalNum).toFixed(props.decimalDigits);
+    decimalNum =
+      typeof decimalNum.split('.') === 'string' ? 0 : decimalNum.split('.')[1] ? decimalNum.split('.')[1] : 0;
+  } else {
+    decimalNum = 0;
+  }
+  const result = '0.' + decimalNum;
+  const resultFixed = Number(result).toFixed(props.decimalDigits);
+  return String(resultFixed).substring(2, resultFixed.length);
+};
+</script>
diff --git a/src/packages/__VUE/price/price.vue b/src/packages/__VUE/price/price.vue
new file mode 100644
index 0000000000..e0e2fb0be4
--- /dev/null
+++ b/src/packages/__VUE/price/price.vue
@@ -0,0 +1,101 @@
+<template>
+  <view :class="classes">
+    <view
+      v-if="needSymbol && position === 'before'"
+      class="nut-price--symbol"
+      :class="`nut-price--symbol-${size}`"
+      v-html="showSymbol"
+    ></view>
+    <view :class="`nut-price--${size}`">
+      {{ formatThousands(price) }}
+    </view>
+    <view v-if="decimalDigits != 0" :class="`nut-price--decimal-${size}`">.</view>
+    <view :class="`nut-price--decimal-${size}`">
+      {{ formatDecimal(price) }}
+    </view>
+    <view
+      v-if="needSymbol && position === 'after'"
+      class="nut-price--symbol"
+      :class="`nut-price--symbol-${size}`"
+      v-html="showSymbol"
+    ></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { PricePosition, PriceSize } from './types';
+
+defineOptions({
+  name: 'NutPrice'
+});
+
+export type PriceProps = Partial<{
+  price: string | number;
+  needSymbol: boolean;
+  symbol: string;
+  decimalDigits: number;
+  thousands: boolean;
+  position: PricePosition;
+  size: PriceSize;
+  strikeThrough: boolean;
+}>;
+
+const props = withDefaults(defineProps<PriceProps>(), {
+  price: 0,
+  needSymbol: true,
+  symbol: '&yen;',
+  decimalDigits: 2,
+  thousands: false,
+  position: 'before',
+  size: 'normal',
+  strikeThrough: false
+});
+
+const prefix = 'nut-price';
+const classes = computed(() => {
+  return {
+    [prefix]: true,
+    [`${prefix}--strike`]: props.strikeThrough
+  };
+});
+const showSymbol = computed(() => {
+  const symbol = props.needSymbol ? props.symbol : '';
+  return symbol;
+});
+const checkPoint = (price: string | number) => {
+  return String(price).indexOf('.') > 0;
+};
+
+const formatThousands = (num: any) => {
+  if (Number(num) == 0) {
+    num = 0;
+  }
+  if (checkPoint(num)) {
+    num = Number(num).toFixed(props.decimalDigits);
+    num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0];
+  } else {
+    num = num.toString();
+  }
+  if (props.thousands) {
+    return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
+  } else {
+    return num;
+  }
+};
+const formatDecimal = (decimalNum: any) => {
+  if (Number(decimalNum) == 0) {
+    decimalNum = 0;
+  }
+  if (checkPoint(decimalNum)) {
+    decimalNum = Number(decimalNum).toFixed(props.decimalDigits);
+    decimalNum =
+      typeof decimalNum.split('.') === 'string' ? 0 : decimalNum.split('.')[1] ? decimalNum.split('.')[1] : 0;
+  } else {
+    decimalNum = 0;
+  }
+  const result = '0.' + decimalNum;
+  const resultFixed = Number(result).toFixed(props.decimalDigits);
+  return String(resultFixed).substring(2, resultFixed.length);
+};
+</script>
diff --git a/src/packages/__VUE/sku/components/SkuHeader.taro.vue b/src/packages/__VUE/sku/components/SkuHeader.taro.vue
index fd17b754ef..8358d3c00d 100644
--- a/src/packages/__VUE/sku/components/SkuHeader.taro.vue
+++ b/src/packages/__VUE/sku/components/SkuHeader.taro.vue
@@ -17,7 +17,7 @@
   </view>
 </template>
 <script lang="ts">
-import NutPrice from '../../price/index.taro.vue';
+import NutPrice from '../../price/index.taro';
 import { createComponent } from '@/packages/utils/create';
 import { useLocale } from '@/packages/utils/useLocale';
 const { create } = createComponent('sku-header');
diff --git a/src/packages/__VUE/sku/components/SkuHeader.vue b/src/packages/__VUE/sku/components/SkuHeader.vue
index fd919f81b8..7735fbd007 100644
--- a/src/packages/__VUE/sku/components/SkuHeader.vue
+++ b/src/packages/__VUE/sku/components/SkuHeader.vue
@@ -17,7 +17,7 @@
   </view>
 </template>
 <script lang="ts">
-import NutPrice from '../../price/index.vue';
+import NutPrice from '../../price';
 import { createComponent } from '@/packages/utils/create';
 import { useLocale } from '@/packages/utils/useLocale';
 const { create } = createComponent('sku-header');