diff --git a/packages/nutui-taro-demo/src/nav/pages/pagination/basic.vue b/packages/nutui-taro-demo/src/nav/pages/pagination/basic.vue
new file mode 100644
index 0000000000..2d74ae7d34
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/pagination/basic.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-pagination v-model="page" :total-items="25" :items-per-page="5" @change="change" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+const change = (value: number) => {
+  console.log(value);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/pagination/custom.vue b/packages/nutui-taro-demo/src/nav/pages/pagination/custom.vue
new file mode 100644
index 0000000000..b04f7dac5c
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/pagination/custom.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-pagination v-model="page" :total-items="500" :show-page-size="5">
+    <template #prev-text>
+      <Left width="10px" height="10px" />
+    </template>
+    <template #next-text>
+      <Right width="10px" height="10px" />
+    </template>
+    <template #page="{ item }"> {{ item.number == 3 ? 'hot' : item.text }} </template>
+  </nut-pagination>
+</template>
+<script setup lang="ts">
+import { Left, Right } from '@nutui/icons-vue';
+import { ref } from 'vue';
+const page = ref(1);
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/pagination/ellipse.vue b/packages/nutui-taro-demo/src/nav/pages/pagination/ellipse.vue
new file mode 100644
index 0000000000..99eb78c921
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/pagination/ellipse.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-pagination v-model="page" :total-items="125" :show-page-size="3" force-ellipses />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/pagination/index.vue b/packages/nutui-taro-demo/src/nav/pages/pagination/index.vue
index 434a7382dd..dfec8737f8 100644
--- a/packages/nutui-taro-demo/src/nav/pages/pagination/index.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/pagination/index.vue
@@ -1,34 +1,38 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-pagination v-model="currentPage" :total-items="25" :items-per-page="5" @change="pageChange" />
-    <h2>简单模式</h2>
-    <nut-pagination v-model="currentPage1" :page-count="12" mode="simple" @change="pageChange" />
-    <h2>显示省略号</h2>
-    <nut-pagination v-model="currentPage2" :total-items="125" :show-page-size="3" force-ellipses @change="pageChange" />
-    <h2>自定义按钮</h2>
-    <nut-pagination v-model="currentPage3" :total-items="500" :show-page-size="5" @change="pageChange">
-      <template #prev-text>
-        <Left size="10px" />
-      </template>
-      <template #next-text>
-        <Right size="10px" />
-      </template>
-      <template #page="{ item }">
-        {{ item.number == 3 ? 'hot' : item.text }}
-      </template>
-    </nut-pagination>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('simple') }}</h2>
+    <Simple />
+
+    <h2>{{ t('ellipse') }}</h2>
+    <Ellipse />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { Left, Right } from '@nutui/icons-vue-taro';
-import { ref } from 'vue';
-const currentPage = ref(1);
-const currentPage1 = ref(1);
-const currentPage2 = ref(1);
-const currentPage3 = ref(1);
-const pageChange = (value: number) => {
-  console.log(value);
-};
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Simple from './simple.vue';
+import Ellipse from './ellipse.vue';
+import Custom from './custom.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    simple: '简单模式',
+    ellipse: '显示省略号',
+    custom: '自定义按钮'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    simple: 'Simple Mode',
+    ellipse: 'Show ellipses',
+    custom: 'Custom Button'
+  }
+});
 </script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/pagination/simple.vue b/packages/nutui-taro-demo/src/nav/pages/pagination/simple.vue
new file mode 100644
index 0000000000..2749f7be3e
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/pagination/simple.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-pagination v-model="page" :page-count="12" mode="simple" @change="change" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+const change = (value: number) => {
+  console.log(value);
+};
+</script>
diff --git a/src/packages/__VUE/pagination/demo.vue b/src/packages/__VUE/pagination/demo.vue
deleted file mode 100644
index 4b4f83b977..0000000000
--- a/src/packages/__VUE/pagination/demo.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-pagination v-model="currentPage" :total-items="25" :items-per-page="5" @change="pageChange" />
-    <h2>{{ translate('simpleMode') }}</h2>
-    <nut-pagination v-model="currentPage1" :page-count="12" mode="simple" @change="pageChange" />
-    <h2>{{ translate('showEllipses') }}</h2>
-    <nut-pagination v-model="currentPage2" :total-items="125" :show-page-size="3" force-ellipses @change="pageChange" />
-    <h2>{{ translate('customButton') }}</h2>
-    <nut-pagination v-model="currentPage3" :total-items="500" :show-page-size="5" @change="pageChange">
-      <template #prev-text>
-        <Left width="10px" height="10px" />
-      </template>
-      <template #next-text>
-        <Right width="10px" height="10px" />
-      </template>
-      <template #page="{ item }">
-        {{ item.number == 3 ? 'hot' : item.text }}
-      </template>
-    </nut-pagination>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Left, Right } from '@nutui/icons-vue';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    simpleMode: '简单模式',
-    showEllipses: '显示省略号',
-    customButton: '自定义按钮'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    simpleMode: 'Simple Mode',
-    showEllipses: 'Show ellipses',
-    customButton: 'Custom Button'
-  }
-});
-const currentPage = ref(1);
-const currentPage1 = ref(1);
-const currentPage2 = ref(1);
-const currentPage3 = ref(1);
-const pageChange = (value: number) => {
-  console.log(value);
-};
-</script>
diff --git a/src/packages/__VUE/pagination/demo/basic.vue b/src/packages/__VUE/pagination/demo/basic.vue
new file mode 100644
index 0000000000..2d74ae7d34
--- /dev/null
+++ b/src/packages/__VUE/pagination/demo/basic.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-pagination v-model="page" :total-items="25" :items-per-page="5" @change="change" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+const change = (value: number) => {
+  console.log(value);
+};
+</script>
diff --git a/src/packages/__VUE/pagination/demo/custom.vue b/src/packages/__VUE/pagination/demo/custom.vue
new file mode 100644
index 0000000000..b04f7dac5c
--- /dev/null
+++ b/src/packages/__VUE/pagination/demo/custom.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-pagination v-model="page" :total-items="500" :show-page-size="5">
+    <template #prev-text>
+      <Left width="10px" height="10px" />
+    </template>
+    <template #next-text>
+      <Right width="10px" height="10px" />
+    </template>
+    <template #page="{ item }"> {{ item.number == 3 ? 'hot' : item.text }} </template>
+  </nut-pagination>
+</template>
+<script setup lang="ts">
+import { Left, Right } from '@nutui/icons-vue';
+import { ref } from 'vue';
+const page = ref(1);
+</script>
diff --git a/src/packages/__VUE/pagination/demo/ellipse.vue b/src/packages/__VUE/pagination/demo/ellipse.vue
new file mode 100644
index 0000000000..99eb78c921
--- /dev/null
+++ b/src/packages/__VUE/pagination/demo/ellipse.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-pagination v-model="page" :total-items="125" :show-page-size="3" force-ellipses />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+</script>
diff --git a/src/packages/__VUE/pagination/demo/index.vue b/src/packages/__VUE/pagination/demo/index.vue
new file mode 100644
index 0000000000..2520ce55dd
--- /dev/null
+++ b/src/packages/__VUE/pagination/demo/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('simple') }}</h2>
+    <Simple />
+
+    <h2>{{ t('ellipse') }}</h2>
+    <Ellipse />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Simple from './simple.vue';
+import Ellipse from './ellipse.vue';
+import Custom from './custom.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    simple: '简单模式',
+    ellipse: '显示省略号',
+    custom: '自定义按钮'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    simple: 'Simple Mode',
+    ellipse: 'Show ellipses',
+    custom: 'Custom Button'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/pagination/demo/simple.vue b/src/packages/__VUE/pagination/demo/simple.vue
new file mode 100644
index 0000000000..2749f7be3e
--- /dev/null
+++ b/src/packages/__VUE/pagination/demo/simple.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-pagination v-model="page" :page-count="12" mode="simple" @change="change" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const page = ref(1);
+const change = (value: number) => {
+  console.log(value);
+};
+</script>
diff --git a/src/packages/__VUE/pagination/doc.en-US.md b/src/packages/__VUE/pagination/doc.en-US.md
index bce7b1b30b..65f82a8279 100644
--- a/src/packages/__VUE/pagination/doc.en-US.md
+++ b/src/packages/__VUE/pagination/doc.en-US.md
@@ -17,91 +17,24 @@ app.use(Pagination);
 ### Basic Usage
 
 Bind current page with v-model.
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="25" :items-per-page="5" @change="pageChange" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
 
-:::
+> demo: pagination basic
 
 ### Simple mode
 
 Pagination can be switched to simple mode with simple mode attribute, and pagination cann't display specific page buttons.
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :page-count="12" mode="simple" @change="pageChange" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
 
-:::
+> demo: pagination simple
 
 ### Show ellipses
 
 The ellipses button will display after with force-ellipses attribute, click it can jump quickly.
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="125" :show-page-size="3" @change="pageChange" force-ellipses />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
 
-:::
+> demo: pagination ellipse
 
 ### Custom Button
 
-Custom pagination button content with pre-text slot、next-text slot and so on.
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="500" @change="pageChange" :show-page-size="5">
-    <template #prev-text>
-      <Left width="10px" height="10px" />
-    </template>
-    <template #next-text>
-      <Right width="10px" height="10px" />
-    </template>
-    <template #page="{ item }"> {{ item.number == 3 ? 'hot' : item.text }} </template>
-  </nut-pagination>
-</template>
-<script setup>
-import { Left, Right } from '@nutui/icons-vue';
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
-
-:::
+> demo: pagination custom
 
 ## API
 
diff --git a/src/packages/__VUE/pagination/doc.md b/src/packages/__VUE/pagination/doc.md
index 2affd62fc7..ad376ef898 100644
--- a/src/packages/__VUE/pagination/doc.md
+++ b/src/packages/__VUE/pagination/doc.md
@@ -17,91 +17,24 @@ app.use(Pagination);
 ### 基础用法
 
 通过 v-model 来绑定当前页码。
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="25" :items-per-page="5" @change="pageChange" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
 
-:::
+> demo: pagination basic
 
 ### 简单模式
 
- 将 mode 设置为 simple 来切换到简单模式，此时分页器不会展示具体的页码按钮。
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :page-count="12" mode="simple" @change="pageChange" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
+将 mode 设置为 `simple` 来切换到简单模式，此时分页器不会展示具体的页码按钮。
 
-:::
+> demo: pagination simple
 
 ### 显示省略号
 
 设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="125" :show-page-size="3" @change="pageChange" force-ellipses />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
 
-:::
+> demo: pagination ellipse
 
 ### 自定义按钮
 
-设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="500" @change="pageChange" :show-page-size="5">
-    <template #prev-text>
-      <Left width="10px" height="10px" />
-    </template>
-    <template #next-text>
-      <Right width="10px" height="10px" />
-    </template>
-    <template #page="{ item }"> {{ item.number == 3 ? 'hot' : item.text }} </template>
-  </nut-pagination>
-</template>
-<script setup>
-import { Left, Right } from '@nutui/icons-vue';
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
-
-:::
+> demo: pagination custom
 
 ## API
 
diff --git a/src/packages/__VUE/pagination/doc.taro.md b/src/packages/__VUE/pagination/doc.taro.md
index 4733d0c77c..cba3dec84a 100644
--- a/src/packages/__VUE/pagination/doc.taro.md
+++ b/src/packages/__VUE/pagination/doc.taro.md
@@ -17,91 +17,24 @@ app.use(Pagination);
 ### 基础用法
 
 通过 v-model 来绑定当前页码。
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="25" :items-per-page="5" @change="pageChange" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
 
-:::
+> demo: pagination basic nav
 
 ### 简单模式
 
- 将 mode 设置为 simple 来切换到简单模式，此时分页器不会展示具体的页码按钮。
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :page-count="12" mode="simple" @change="pageChange" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
+将 mode 设置为 `simple` 来切换到简单模式，此时分页器不会展示具体的页码按钮。
 
-:::
+> demo: pagination simple nav
 
 ### 显示省略号
 
 设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="125" :show-page-size="3" @change="pageChange" force-ellipses />
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
 
-:::
+> demo: pagination ellipse nav
 
 ### 自定义按钮
 
-设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
-:::demo
-
-```vue
-<template>
-  <nut-pagination v-model="page" :total-items="500" @change="pageChange" :show-page-size="5">
-    <template #prev-text>
-      <Left size="10px" />
-    </template>
-    <template #next-text>
-      <Right size="10px" />
-    </template>
-    <template #page="{ item }"> {{ item.number == 3 ? 'hot' : item.text }} </template>
-  </nut-pagination>
-</template>
-<script setup>
-import { Left, Right } from '@nutui/icons-vue-taro';
-import { ref } from 'vue';
-const page = ref(1);
-const pageChange = (value) => {
-  console.log(value);
-};
-</script>
-```
-
-:::
+> demo: pagination custom nav
 
 ## API