From 2f8bec983ba70e84d1a619a43b998120f775266b Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Sun, 19 Nov 2023 03:32:06 +0800
Subject: [PATCH] chore(demo): remove createComponent (#2668)

---
 scripts/demo.js                             |   4 +-
 src/packages/__VUE/actionsheet/demo.vue     |  76 ++++----
 src/packages/__VUE/addresslist/demo.vue     |   4 +-
 src/packages/__VUE/animate/demo.vue         |  78 ++++----
 src/packages/__VUE/audio/demo.vue           |  32 ++--
 src/packages/__VUE/avatar/demo.vue          |  56 +++---
 src/packages/__VUE/backtop/demo.vue         |  12 +-
 src/packages/__VUE/badge/demo.vue           |  40 ++--
 src/packages/__VUE/barrage/demo.vue         |   4 +-
 src/packages/__VUE/calendar/demo.vue        | 110 ++++++-----
 src/packages/__VUE/card/demo.vue            |   4 +-
 src/packages/__VUE/cascader/demo.vue        |  44 ++---
 src/packages/__VUE/category/demo.vue        |   4 +-
 src/packages/__VUE/cell/demo.vue            | 106 ++++++-----
 src/packages/__VUE/checkbox/demo.vue        | 100 +++++-----
 src/packages/__VUE/circleprogress/demo.vue  |  50 +++--
 src/packages/__VUE/collapse/demo.vue        | 114 ++++++------
 src/packages/__VUE/comment/demo.vue         |   4 +-
 src/packages/__VUE/configprovider/demo.vue  | 110 ++++++-----
 src/packages/__VUE/countdown/demo.vue       |  76 ++++----
 src/packages/__VUE/countup/demo.vue         |  40 ++--
 src/packages/__VUE/datepicker/demo.vue      |  96 +++++-----
 src/packages/__VUE/dialog/demo.vue          |  80 ++++----
 src/packages/__VUE/divider/demo.vue         |  48 +++--
 src/packages/__VUE/drag/demo.vue            |  48 +++--
 src/packages/__VUE/ecard/demo.vue           |   4 +-
 src/packages/__VUE/elevator/demo.vue        | 192 ++++++++++----------
 src/packages/__VUE/ellipsis/demo.vue        |  38 ++--
 src/packages/__VUE/empty/demo.vue           |  60 +++---
 src/packages/__VUE/fixednav/demo.vue        |  56 +++---
 src/packages/__VUE/form/demo.vue            | 164 ++++++++---------
 src/packages/__VUE/grid/demo.vue            |  64 +++----
 src/packages/__VUE/icon/demo.vue            |  40 ++--
 src/packages/__VUE/image/demo.vue           |  44 ++---
 src/packages/__VUE/imagepreview/demo.vue    |  40 ++--
 src/packages/__VUE/indicator/demo.vue       |  32 ++--
 src/packages/__VUE/infiniteloading/demo.vue |  36 ++--
 src/packages/__VUE/input/demo.vue           | 168 +++++++++--------
 src/packages/__VUE/inputnumber/demo.vue     |  60 +++---
 src/packages/__VUE/invoice/demo.vue         |   4 +-
 src/packages/__VUE/layout/demo.vue          |  28 ++-
 src/packages/__VUE/list/demo.vue            |  20 +-
 src/packages/__VUE/menu/demo.vue            | 148 ++++++++-------
 src/packages/__VUE/navbar/demo.vue          |  64 +++----
 src/packages/__VUE/notify/demo.vue          |  60 +++---
 src/packages/__VUE/numberkeyboard/demo.vue  |  48 +++--
 src/packages/__VUE/overlay/demo.vue         |  52 +++---
 src/packages/__VUE/pagination/demo.vue      |  32 ++--
 src/packages/__VUE/picker/demo.vue          |   4 +-
 src/packages/__VUE/popover/demo.vue         |  60 +++---
 src/packages/__VUE/popup/demo.vue           |  76 ++++----
 src/packages/__VUE/price/demo.vue           |  44 ++---
 src/packages/__VUE/progress/demo.vue        |  60 +++---
 src/packages/__VUE/pullrefresh/demo.vue     |  53 +++---
 src/packages/__VUE/radio/demo.vue           |  52 +++---
 src/packages/__VUE/range/demo.vue           |  60 +++---
 src/packages/__VUE/rate/demo.vue            |  52 +++---
 src/packages/__VUE/searchbar/demo.vue       |  58 +++---
 src/packages/__VUE/shortpassword/demo.vue   |  52 +++---
 src/packages/__VUE/sidenavbar/demo.vue      | 100 +++++-----
 src/packages/__VUE/signature/demo.vue       |   4 +-
 src/packages/__VUE/skeleton/demo.vue        |  44 ++---
 src/packages/__VUE/sku/demo.vue             |   4 +-
 src/packages/__VUE/space/demo.vue           |  36 ++--
 src/packages/__VUE/steps/demo.vue           | 154 +++++++---------
 src/packages/__VUE/sticky/demo.vue          |  36 ++--
 src/packages/__VUE/swipe/demo.vue           |  76 ++++----
 src/packages/__VUE/swiper/demo.vue          |  56 +++---
 src/packages/__VUE/switch/demo.vue          |  60 +++---
 src/packages/__VUE/tabbar/demo.vue          |  52 +++---
 src/packages/__VUE/table/demo.vue           | 116 ++++++------
 src/packages/__VUE/tabs/demo.vue            |  64 +++----
 src/packages/__VUE/tag/demo.vue             |  80 ++++----
 src/packages/__VUE/textarea/demo.vue        |  48 +++--
 src/packages/__VUE/timeselect/demo.vue      |   4 +-
 src/packages/__VUE/toast/demo.vue           |  56 +++---
 src/packages/__VUE/tour/demo.vue            |  40 ++--
 src/packages/__VUE/trendarrow/demo.vue      |  48 +++--
 src/packages/__VUE/uploader/demo.vue        |  80 ++++----
 src/packages/__VUE/video/demo.vue           |  69 ++++---
 src/packages/__VUE/watermark/demo.vue       |  32 ++--
 src/packages/utils/create/component.ts      |   8 -
 82 files changed, 2154 insertions(+), 2478 deletions(-)

diff --git a/scripts/demo.js b/scripts/demo.js
index 4ab2e1c4bc..a8c5e4e837 100644
--- a/scripts/demo.js
+++ b/scripts/demo.js
@@ -50,9 +50,8 @@ export default create({
 <script setup lang="ts">
 import { defineComponent } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('${nameLc}');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () => useTranslate({
+const translate = useTranslate({
   'zh-CN': {
     basic: '基础用法'
   },
@@ -60,7 +59,6 @@ const initTranslate = () => useTranslate({
     basic: 'Basic Usage'
   }
 })
-initTranslate();
 </script>
 `,
     taroDemo: `<template>
diff --git a/src/packages/__VUE/actionsheet/demo.vue b/src/packages/__VUE/actionsheet/demo.vue
index 798c5447b2..3ccc232559 100644
--- a/src/packages/__VUE/actionsheet/demo.vue
+++ b/src/packages/__VUE/actionsheet/demo.vue
@@ -58,46 +58,43 @@
 import { computed, reactive } from 'vue';
 import NutActionSheet from './index.vue';
 import NutCell from '../cell/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('action-sheet');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      showCancelButton: '展示取消按钮',
-      showDescription: '展示描述信息',
-      optionStatus: '选项状态',
-      customContent: '自定义内容',
-      cancelTxt: '取消',
-      title: '标题',
-      optionOne: '选项一',
-      optionTwo: '选项二',
-      optionThree: '选项三',
-      showDesc: '这是一段描述信息',
-      checkOption: '选中选项',
-      desc: '描述信息',
-      disableOption: '禁用选项',
-      loadOptions: '加载选项'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      showCancelButton: 'Show Cancel Button',
-      showDescription: 'Show Description',
-      optionStatus: 'Option Status',
-      customContent: 'Custom Content',
-      cancelTxt: 'cancle',
-      title: 'title',
-      optionOne: 'option one',
-      optionTwo: 'option two',
-      optionThree: 'option three',
-      showDesc: 'This is a description',
-      checkOption: 'Check option',
-      desc: 'Description',
-      disableOption: 'Disable option',
-      loadOptions: 'Load options'
-    }
-  });
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    showCancelButton: '展示取消按钮',
+    showDescription: '展示描述信息',
+    optionStatus: '选项状态',
+    customContent: '自定义内容',
+    cancelTxt: '取消',
+    title: '标题',
+    optionOne: '选项一',
+    optionTwo: '选项二',
+    optionThree: '选项三',
+    showDesc: '这是一段描述信息',
+    checkOption: '选中选项',
+    desc: '描述信息',
+    disableOption: '禁用选项',
+    loadOptions: '加载选项'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    showCancelButton: 'Show Cancel Button',
+    showDescription: 'Show Description',
+    optionStatus: 'Option Status',
+    customContent: 'Custom Content',
+    cancelTxt: 'cancle',
+    title: 'title',
+    optionOne: 'option one',
+    optionTwo: 'option two',
+    optionThree: 'option three',
+    showDesc: 'This is a description',
+    checkOption: 'Check option',
+    desc: 'Description',
+    disableOption: 'Disable option',
+    loadOptions: 'Load options'
+  }
+});
 interface Item {
   name: string;
   subname?: string;
@@ -105,7 +102,6 @@ interface Item {
   disable?: boolean;
   loading?: boolean;
 }
-initTranslate();
 const state = reactive({
   isVisible1: false,
   isVisible2: false,
diff --git a/src/packages/__VUE/addresslist/demo.vue b/src/packages/__VUE/addresslist/demo.vue
index 0be60823de..a70c682759 100644
--- a/src/packages/__VUE/addresslist/demo.vue
+++ b/src/packages/__VUE/addresslist/demo.vue
@@ -41,11 +41,9 @@
 </template>
 
 <script setup lang="ts">
-import { createComponent } from '@/packages/utils/create';
 import { reactive, ref } from 'vue';
-const { translate } = createComponent('address-list');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-useTranslate({
+const translate = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     title1: '长按功能',
diff --git a/src/packages/__VUE/animate/demo.vue b/src/packages/__VUE/animate/demo.vue
index 9fe4a29b69..b3c256b32d 100644
--- a/src/packages/__VUE/animate/demo.vue
+++ b/src/packages/__VUE/animate/demo.vue
@@ -86,49 +86,45 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('animate');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      show: '通过 show 控制动画',
-      once: '单次动画',
-      times: '多次触发',
-      basic: '循环动画',
-      click: '点击触发',
-      FRTL: '由右向左划入',
-      FLTR: '由左向右划入',
-      FTTB: '由上至下划入',
-      FBTT: '由下至上划入',
-      shake: 'shake-抖动',
-      ripple: 'ripple-心跳',
-      breath: 'breath-呼吸灯',
-      twinkle: 'twinkle-水波',
-      flicker: 'flicker-擦亮',
-      jump: 'jump-跳跃',
-      float: 'float-漂浮'
-    },
-    'en-US': {
-      show: 'Trigger animation through show',
-      once: 'Once',
-      times: 'Several times',
-      basic: 'Loop animation',
-      FRTL: 'From right to left',
-      FLTR: 'From left to right',
-      FTTB: 'From top to bottom',
-      FBTT: 'From bottom to top',
-      shake: 'shake',
-      ripple: 'ripple',
-      breath: 'breath',
-      twinkle: 'twinkle',
-      flicker: 'flicker',
-      jump: 'jump',
-      float: 'float'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    show: '通过 show 控制动画',
+    once: '单次动画',
+    times: '多次触发',
+    basic: '循环动画',
+    click: '点击触发',
+    FRTL: '由右向左划入',
+    FLTR: '由左向右划入',
+    FTTB: '由上至下划入',
+    FBTT: '由下至上划入',
+    shake: 'shake-抖动',
+    ripple: 'ripple-心跳',
+    breath: 'breath-呼吸灯',
+    twinkle: 'twinkle-水波',
+    flicker: 'flicker-擦亮',
+    jump: 'jump-跳跃',
+    float: 'float-漂浮'
+  },
+  'en-US': {
+    show: 'Trigger animation through show',
+    once: 'Once',
+    times: 'Several times',
+    basic: 'Loop animation',
+    FRTL: 'From right to left',
+    FLTR: 'From left to right',
+    FTTB: 'From top to bottom',
+    FBTT: 'From bottom to top',
+    shake: 'shake',
+    ripple: 'ripple',
+    breath: 'breath',
+    twinkle: 'twinkle',
+    flicker: 'flicker',
+    jump: 'jump',
+    float: 'float'
+  }
+});
 
 const show1 = ref(false);
 const onClick1 = () => {
diff --git a/src/packages/__VUE/audio/demo.vue b/src/packages/__VUE/audio/demo.vue
index 843c871c7e..2dd7461a4f 100644
--- a/src/packages/__VUE/audio/demo.vue
+++ b/src/packages/__VUE/audio/demo.vue
@@ -78,27 +78,23 @@
 import { ref, onMounted } from 'vue';
 import NutAudio from './index.vue';
 import NutAudioOperate from '../audiooperate/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('audio');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop, Voice } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      voicePlay: '语音播放',
-      progress: '进度条展示',
-      customControl: '自定义操作按钮'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      voicePlay: 'Voice Playing',
-      progress: 'Progress',
-      customControl: 'Custom Control'
-    }
-  });
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    voicePlay: '语音播放',
+    progress: '进度条展示',
+    customControl: '自定义操作按钮'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    voicePlay: 'Voice Playing',
+    progress: 'Progress',
+    customControl: 'Custom Control'
+  }
+});
 
-initTranslate();
 const audioDemo = ref({
   second: 0
 });
diff --git a/src/packages/__VUE/avatar/demo.vue b/src/packages/__VUE/avatar/demo.vue
index 17c743184f..bee447782e 100644
--- a/src/packages/__VUE/avatar/demo.vue
+++ b/src/packages/__VUE/avatar/demo.vue
@@ -133,38 +133,34 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('cell');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { My } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      title1: '支持三种尺寸：large、normal、small',
-      title2: '支持两种形状：square、round',
-      title3: '支持三种类型：图片、Icon 以及字符',
-      title4: 'Icon 和字符型可以自定义颜色及背景色',
-      title5: '带徽标的头像',
-      title6: '头像组合展现',
-      title7: '组合头像可控制层级方向',
-      title8: '点击头像触发事件',
-      title9: '动态添加头像',
-      add: '添加'
-    },
-    'en-US': {
-      title1: 'Support three sizes：small、normal、large',
-      title2: 'Support two shapes：square、round',
-      title3: 'Support three types：picture、icon、letter',
-      title4: 'Icon and letter types can have custom colors and background colors',
-      title5: 'Avatar with badge',
-      title6: 'Avatar group display',
-      title7: 'Avatar group to control hierarchy direction',
-      title8: 'Click on the avatar to trigger the event',
-      title9: 'Dynamically adding avatars',
-      add: 'add'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    title1: '支持三种尺寸：large、normal、small',
+    title2: '支持两种形状：square、round',
+    title3: '支持三种类型：图片、Icon 以及字符',
+    title4: 'Icon 和字符型可以自定义颜色及背景色',
+    title5: '带徽标的头像',
+    title6: '头像组合展现',
+    title7: '组合头像可控制层级方向',
+    title8: '点击头像触发事件',
+    title9: '动态添加头像',
+    add: '添加'
+  },
+  'en-US': {
+    title1: 'Support three sizes：small、normal、large',
+    title2: 'Support two shapes：square、round',
+    title3: 'Support three types：picture、icon、letter',
+    title4: 'Icon and letter types can have custom colors and background colors',
+    title5: 'Avatar with badge',
+    title6: 'Avatar group display',
+    title7: 'Avatar group to control hierarchy direction',
+    title8: 'Click on the avatar to trigger the event',
+    title9: 'Dynamically adding avatars',
+    add: 'add'
+  }
+});
 const handleClick = () => {
   console.log('Click Test');
 };
diff --git a/src/packages/__VUE/backtop/demo.vue b/src/packages/__VUE/backtop/demo.vue
index 0e8d3794c0..c2c037385d 100644
--- a/src/packages/__VUE/backtop/demo.vue
+++ b/src/packages/__VUE/backtop/demo.vue
@@ -14,16 +14,12 @@
 
 <script setup lang="ts">
 import NutBacktop from './index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('backtop');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Top } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': { title: '基础用法', clg: '触发返回顶部', content: '我是测试数据', backText: '顶部' },
-    'en-US': { title: 'Basic Usage', clg: 'backtop', content: 'test data', backText: 'Top' }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': { title: '基础用法', clg: '触发返回顶部', content: '我是测试数据', backText: '顶部' },
+  'en-US': { title: 'Basic Usage', clg: 'backtop', content: 'test data', backText: 'Top' }
+});
 const handleClick = () => {
   console.log(translate('clg'));
 };
diff --git a/src/packages/__VUE/badge/demo.vue b/src/packages/__VUE/badge/demo.vue
index cd68a3f5c7..3d7d7ef51f 100644
--- a/src/packages/__VUE/badge/demo.vue
+++ b/src/packages/__VUE/badge/demo.vue
@@ -92,30 +92,26 @@
 </template>
 
 <script setup lang="ts">
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('badge');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Check, Download, Link as IconLink } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      title: '基础用法',
-      title1: '最大值',
-      title2: '自定义颜色',
-      title3: '自定义徽标内容',
-      title4: '自定义位置',
-      title5: '独立展示'
-    },
-    'en-US': {
-      title: 'Basic Usage',
-      title1: 'Max',
-      title2: 'Custom Color',
-      title3: 'Custom Content',
-      title4: 'Custom Position ',
-      title5: 'Standalone'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    title: '基础用法',
+    title1: '最大值',
+    title2: '自定义颜色',
+    title3: '自定义徽标内容',
+    title4: '自定义位置',
+    title5: '独立展示'
+  },
+  'en-US': {
+    title: 'Basic Usage',
+    title1: 'Max',
+    title2: 'Custom Color',
+    title3: 'Custom Content',
+    title4: 'Custom Position ',
+    title5: 'Standalone'
+  }
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/barrage/demo.vue b/src/packages/__VUE/barrage/demo.vue
index fac77fda73..8e4e308835 100644
--- a/src/packages/__VUE/barrage/demo.vue
+++ b/src/packages/__VUE/barrage/demo.vue
@@ -21,10 +21,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('barrage');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-useTranslate({
+const translate = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     slotTitle: 'slot 用法',
diff --git a/src/packages/__VUE/calendar/demo.vue b/src/packages/__VUE/calendar/demo.vue
index cf95da1150..bad83ebad8 100644
--- a/src/packages/__VUE/calendar/demo.vue
+++ b/src/packages/__VUE/calendar/demo.vue
@@ -282,73 +282,69 @@
 
 <script setup lang="ts">
 import { reactive, ref, toRefs } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import Utils from '@/packages/utils/date';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { CalendarRef, Day } from '../calendaritem/type';
 
-const { translate } = createComponent('calendar');
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      title: '基础用法',
-      title1: '快捷选择',
-      title2: '自定义日历',
-      title3: '自定义周起始日',
-      title4: '平铺展示',
+const translate = useTranslate({
+  'zh-CN': {
+    title: '基础用法',
+    title1: '快捷选择',
+    title2: '自定义日历',
+    title3: '自定义周起始日',
+    title4: '平铺展示',
 
-      please: '请选择',
-      single: '选择单个日期',
-      range: '选择日期区间',
-      multiple: '选择多个日期',
-      week: '选择周',
-      disabledDate: '自定义禁用日期',
+    please: '请选择',
+    single: '选择单个日期',
+    range: '选择日期区间',
+    multiple: '选择多个日期',
+    week: '选择周',
+    disabledDate: '自定义禁用日期',
 
-      conjunction: '至',
-      custom_btn: '自定义按钮',
-      timeText: '自定义时间文案',
-      custom_footer: '自定义底部',
-      custom_footer_text1: '偶数的日期不能选择',
-      custom_footer_text2: '奇数的日期可以选择',
+    conjunction: '至',
+    custom_btn: '自定义按钮',
+    timeText: '自定义时间文案',
+    custom_footer: '自定义底部',
+    custom_footer_text1: '偶数的日期不能选择',
+    custom_footer_text2: '奇数的日期可以选择',
 
-      goDate: '去某个月',
-      seven: '最近七天',
-      current: '当月',
-      enter: '入店',
-      leave: '离店',
-      mid: '中旬',
-      selected: '已选择：'
-    },
-    'en-US': {
-      title: 'Basic Usage',
-      title1: 'Quick Select',
-      title2: 'Custom Calendar',
-      title3: 'Custom First Day Of Week',
-      title4: 'Tiled Display',
+    goDate: '去某个月',
+    seven: '最近七天',
+    current: '当月',
+    enter: '入店',
+    leave: '离店',
+    mid: '中旬',
+    selected: '已选择：'
+  },
+  'en-US': {
+    title: 'Basic Usage',
+    title1: 'Quick Select',
+    title2: 'Custom Calendar',
+    title3: 'Custom First Day Of Week',
+    title4: 'Tiled Display',
 
-      please: 'Please Select Date',
-      single: 'Select Single Date',
-      range: 'Select Date Range',
-      multiple: 'Select Multiple Date',
-      week: 'Select Week',
+    please: 'Please Select Date',
+    single: 'Select Single Date',
+    range: 'Select Date Range',
+    multiple: 'Select Multiple Date',
+    week: 'Select Week',
 
-      conjunction: '-',
-      custom_btn: 'Custom Button',
-      timeText: 'Custom Date Text',
-      custom_footer: 'Custom Footer',
-      custom_footer_text1: 'Even dates cannot be selected',
-      custom_footer_text2: 'Odd dates can be selected',
+    conjunction: '-',
+    custom_btn: 'Custom Button',
+    timeText: 'Custom Date Text',
+    custom_footer: 'Custom Footer',
+    custom_footer_text1: 'Even dates cannot be selected',
+    custom_footer_text2: 'Odd dates can be selected',
 
-      goDate: 'Go Date',
-      seven: 'Last Seven Days',
-      current: 'This Month',
-      enter: 'enter',
-      leave: 'leave',
-      mid: 'mid',
-      selected: 'selected:'
-    }
-  });
-initTranslate();
+    goDate: 'Go Date',
+    seven: 'Last Seven Days',
+    current: 'This Month',
+    enter: 'enter',
+    leave: 'leave',
+    mid: 'mid',
+    selected: 'selected:'
+  }
+});
 const calendarRef = ref<null | CalendarRef>(null);
 const state = reactive({
   isVisible: false,
diff --git a/src/packages/__VUE/card/demo.vue b/src/packages/__VUE/card/demo.vue
index e3a7072b1b..ccb6bfb3b5 100644
--- a/src/packages/__VUE/card/demo.vue
+++ b/src/packages/__VUE/card/demo.vue
@@ -72,10 +72,8 @@
 
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('card');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-useTranslate({
+const translate = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     customProduct: '自定义商品标签',
diff --git a/src/packages/__VUE/cascader/demo.vue b/src/packages/__VUE/cascader/demo.vue
index 0405f060be..98c9871df4 100644
--- a/src/packages/__VUE/cascader/demo.vue
+++ b/src/packages/__VUE/cascader/demo.vue
@@ -92,31 +92,27 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('cascader');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title1: '自定义属性名称',
-      title2: '动态加载',
-      title3: '部分数据动态加载',
-      title4: '自动转换',
-      addressTip: '选择地址',
-      addressTip1: '请选择地址'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title1: 'Custom attribute name',
-      title2: 'Async loading',
-      title3: 'Async loading of partial data',
-      title4: 'Automatic data conversion',
-      addressTip: 'Select address',
-      addressTip1: 'Please select an address'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '自定义属性名称',
+    title2: '动态加载',
+    title3: '部分数据动态加载',
+    title4: '自动转换',
+    addressTip: '选择地址',
+    addressTip1: '请选择地址'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Custom attribute name',
+    title2: 'Async loading',
+    title3: 'Async loading of partial data',
+    title4: 'Automatic data conversion',
+    addressTip: 'Select address',
+    addressTip1: 'Please select an address'
+  }
+});
 // 基础用法
 const demo1 = reactive({
   visible: false,
diff --git a/src/packages/__VUE/category/demo.vue b/src/packages/__VUE/category/demo.vue
index 5c1d0e6396..73401caad0 100644
--- a/src/packages/__VUE/category/demo.vue
+++ b/src/packages/__VUE/category/demo.vue
@@ -18,11 +18,9 @@
 </template>
 
 <script setup lang="ts">
-import { createComponent } from '@/packages/utils/create';
 import { reactive, onMounted } from 'vue';
-const { translate } = createComponent('cmt');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-useTranslate({
+const translate = useTranslate({
   'zh-CN': {
     title1: '经典分类模式',
     title2: '只显示文字',
diff --git a/src/packages/__VUE/cell/demo.vue b/src/packages/__VUE/cell/demo.vue
index 7103376e0f..6f3a507236 100644
--- a/src/packages/__VUE/cell/demo.vue
+++ b/src/packages/__VUE/cell/demo.vue
@@ -77,65 +77,61 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('cell');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import NutCell from './index.vue';
 import NutCellGroup from '../cellgroup/index.vue';
 import { My } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      desc: '描述文字',
-      desc1: '使用 nut-cell-group 支持 title desc slots',
-      title: '我是标题',
-      title1: '副标题描述',
-      title2: '直接使用插槽(slot)',
-      title3: '点击测试',
-      title4: '圆角设置 0',
-      title5: '链接 | 分组用法',
-      title6: '只展示 desc ，可通过 desc-text-align 调整内容位置',
-      title7: '垂直居中',
-      title8: '直接使用插槽(slot title)',
-      title9: '尺寸设置 large',
-      title10: '直接使用插槽(slot desc)',
-      link: '链接',
-      urlJump: 'URL 跳转',
-      routerJump: '路由跳转 ’/‘ ',
-      name: '姓名',
-      image: '图片',
-      content: '自定义内容',
-      customRight: '自定义右侧箭头区域',
-      customLeftIcon: '自定义左侧 Icon 区域',
-      displayIcon: '单元格展示图标'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      desc: 'Description',
-      desc1: 'Usage nut-cell-group support title desc slots',
-      title: 'Title',
-      title1: 'Subtitle Description',
-      title2: 'Use Slots',
-      title3: 'Click Test',
-      title4: 'Round Radius 0',
-      title5: 'Link | CellGroup Usage',
-      title6: 'Only display desc , you can adjust the content position through desc-text-align',
-      title7: 'Vertical Center',
-      title8: 'Use Slots title',
-      title9: 'Size setting large',
-      link: 'Link',
-      urlJump: 'URL Jump',
-      routerJump: 'Router Jump ’/‘ ',
-      name: 'Name',
-      image: 'Image',
-      content: 'Content',
-      customRight: 'Customize the right arrow area',
-      customLeftIcon: 'Customize the left Icon area',
-      displayIcon: 'cell display icon'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    desc: '描述文字',
+    desc1: '使用 nut-cell-group 支持 title desc slots',
+    title: '我是标题',
+    title1: '副标题描述',
+    title2: '直接使用插槽(slot)',
+    title3: '点击测试',
+    title4: '圆角设置 0',
+    title5: '链接 | 分组用法',
+    title6: '只展示 desc ，可通过 desc-text-align 调整内容位置',
+    title7: '垂直居中',
+    title8: '直接使用插槽(slot title)',
+    title9: '尺寸设置 large',
+    title10: '直接使用插槽(slot desc)',
+    link: '链接',
+    urlJump: 'URL 跳转',
+    routerJump: '路由跳转 ’/‘ ',
+    name: '姓名',
+    image: '图片',
+    content: '自定义内容',
+    customRight: '自定义右侧箭头区域',
+    customLeftIcon: '自定义左侧 Icon 区域',
+    displayIcon: '单元格展示图标'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    desc: 'Description',
+    desc1: 'Usage nut-cell-group support title desc slots',
+    title: 'Title',
+    title1: 'Subtitle Description',
+    title2: 'Use Slots',
+    title3: 'Click Test',
+    title4: 'Round Radius 0',
+    title5: 'Link | CellGroup Usage',
+    title6: 'Only display desc , you can adjust the content position through desc-text-align',
+    title7: 'Vertical Center',
+    title8: 'Use Slots title',
+    title9: 'Size setting large',
+    link: 'Link',
+    urlJump: 'URL Jump',
+    routerJump: 'Router Jump ’/‘ ',
+    name: 'Name',
+    image: 'Image',
+    content: 'Content',
+    customRight: 'Customize the right arrow area',
+    customLeftIcon: 'Customize the left Icon area',
+    displayIcon: 'cell display icon'
+  }
+});
 const click = () => {
   console.log('Click Test');
 };
diff --git a/src/packages/__VUE/checkbox/demo.vue b/src/packages/__VUE/checkbox/demo.vue
index a984504d92..6ae4138a2c 100644
--- a/src/packages/__VUE/checkbox/demo.vue
+++ b/src/packages/__VUE/checkbox/demo.vue
@@ -142,61 +142,57 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref, Ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { showToast } from '@/packages/nutui.vue';
-const { translate } = createComponent('checkbox');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Checklist } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法-左右',
-      semi: '半选状态',
-      disable: '禁用状态',
-      size: '自定义尺寸',
-      icon: '自定义图标',
-      change: '点击触发change事件',
-      useGroup: 'checkboxGroup使用',
-      useGroupLimit: 'checkboxGroup使用，限制最大可选数（2个）',
-      disableGroup: 'checkboxGroup禁用',
-      selectGroup: 'checkboxGroup 全选/取消',
-      selectAll: '全选',
-      cancel: '取消',
-      selectReverse: '反选',
-      combine: '组合复选框',
-      selected: '当前选中值',
-      select: '选中',
-      checkbox: '复选框',
-      selectedDisable: '选中时禁用状态',
-      unselectDisable: '未选时禁用状态',
-      useGroupInte: '全选/半选/取消',
-      useShape: '按钮形状'
-    },
-    'en-US': {
-      basic: 'Basic usage - left and right',
-      semi: 'Semi selective',
-      disable: 'Disabled state',
-      size: 'Custom size',
-      icon: 'Custom icon',
-      change: 'Click to trigger the change event',
-      useGroup: 'use checkboxGroup',
-      useGroupLimit: 'use checkboxGroup, Limit the maximum number of options (2)',
-      disableGroup: 'disable checkboxGroup',
-      selectGroup: 'Checkboxgroup select all / cancel',
-      selectAll: 'selectAll',
-      cancel: 'cancel',
-      selectReverse: 'reverse',
-      combine: 'Combined check box',
-      selected: 'Currently selected value',
-      select: 'selected value',
-      checkbox: 'check box',
-      selectedDisable: 'Disabled when selected',
-      unselectDisable: 'Disabled when not selected',
-      useGroupInte: 'Select all / half / cancel',
-      useShape: 'Button shape'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法-左右',
+    semi: '半选状态',
+    disable: '禁用状态',
+    size: '自定义尺寸',
+    icon: '自定义图标',
+    change: '点击触发change事件',
+    useGroup: 'checkboxGroup使用',
+    useGroupLimit: 'checkboxGroup使用，限制最大可选数（2个）',
+    disableGroup: 'checkboxGroup禁用',
+    selectGroup: 'checkboxGroup 全选/取消',
+    selectAll: '全选',
+    cancel: '取消',
+    selectReverse: '反选',
+    combine: '组合复选框',
+    selected: '当前选中值',
+    select: '选中',
+    checkbox: '复选框',
+    selectedDisable: '选中时禁用状态',
+    unselectDisable: '未选时禁用状态',
+    useGroupInte: '全选/半选/取消',
+    useShape: '按钮形状'
+  },
+  'en-US': {
+    basic: 'Basic usage - left and right',
+    semi: 'Semi selective',
+    disable: 'Disabled state',
+    size: 'Custom size',
+    icon: 'Custom icon',
+    change: 'Click to trigger the change event',
+    useGroup: 'use checkboxGroup',
+    useGroupLimit: 'use checkboxGroup, Limit the maximum number of options (2)',
+    disableGroup: 'disable checkboxGroup',
+    selectGroup: 'Checkboxgroup select all / cancel',
+    selectAll: 'selectAll',
+    cancel: 'cancel',
+    selectReverse: 'reverse',
+    combine: 'Combined check box',
+    selected: 'Currently selected value',
+    select: 'selected value',
+    checkbox: 'check box',
+    selectedDisable: 'Disabled when selected',
+    unselectDisable: 'Disabled when not selected',
+    useGroupInte: 'Select all / half / cancel',
+    useShape: 'Button shape'
+  }
+});
 const group = ref(null) as Ref;
 const group2 = ref(null) as Ref;
 const state = reactive({
diff --git a/src/packages/__VUE/circleprogress/demo.vue b/src/packages/__VUE/circleprogress/demo.vue
index 548d4b4172..f7f583c160 100644
--- a/src/packages/__VUE/circleprogress/demo.vue
+++ b/src/packages/__VUE/circleprogress/demo.vue
@@ -34,34 +34,30 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('circle-progress');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      customWidth: '自定义宽度',
-      Gradient: '渐变色',
-      customSize: '自定义尺寸',
-      customContent: '自定义内容',
-      custom: '自定义',
-      dynamicChange: '动态改变',
-      reduce: '减少',
-      add: '增加'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      customWidth: 'Custom Width',
-      Gradient: 'Gradient',
-      custom: 'custom',
-      customContent: 'Custom Content',
-      dynamicChange: 'Dynamic Change',
-      reduce: 'reduce',
-      add: 'add'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    customWidth: '自定义宽度',
+    Gradient: '渐变色',
+    customSize: '自定义尺寸',
+    customContent: '自定义内容',
+    custom: '自定义',
+    dynamicChange: '动态改变',
+    reduce: '减少',
+    add: '增加'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    customWidth: 'Custom Width',
+    Gradient: 'Gradient',
+    custom: 'custom',
+    customContent: 'Custom Content',
+    dynamicChange: 'Dynamic Change',
+    reduce: 'reduce',
+    add: 'add'
+  }
+});
 const gradientColor = {
   '0%': '#FF5E5E',
   '100%': '#FFA062'
diff --git a/src/packages/__VUE/collapse/demo.vue b/src/packages/__VUE/collapse/demo.vue
index 60ef998da1..105278856f 100644
--- a/src/packages/__VUE/collapse/demo.vue
+++ b/src/packages/__VUE/collapse/demo.vue
@@ -64,66 +64,62 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
 import { Notice, Follow } from '@nutui/icons-vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('collapse');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic1: '基础用法',
-      basic2: '无icon样式',
-      basic3: '手风琴',
-      basic4: '自定义折叠图标',
-      basic5: '自定义标题图标',
-      basic6: '设置固定内容（不折叠）',
-      title1: '标题1',
-      title2: '标题2',
-      title3: '标题3',
-      title4: '文本测试',
-      title5: '固定内容',
-      title6: '文本内容',
-      desc1: 'NutUI是一套拥有京东风格的轻量级的 Vue 组件库',
-      desc2: '在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！',
-      desc3: '引入Vue3新特性 Composition API、Teleport、Emits 等',
-      desc4: '全面使用 TypeScipt',
-      desc5: '基于京东设计语言体系，构建场景',
-      desc6: '提高界⾯的模块化通用程度',
-      desc7: '采用组合式 API Composition 语法重构，结构清晰，功能模块化',
-      desc8: ' NUTUI3.0重新思考其内在的一致性和可组合性',
-      desc9: '提⾼产研输出对接的效率，降低输出工作量',
-      desc10: '组件 emits 事件单独提取，增强代码可读性',
-      desc11: '使用 Teleport 新特性重构挂载类组件',
-      subtitle: '副标题'
-    },
-    'en-US': {
-      basic1: 'Basic Usage',
-      basic2: 'No icon style',
-      basic3: 'accordion',
-      basic4: 'Custom collapse Icon',
-      basic5: 'Custom title Icon',
-      basic6: 'Set fixed content (do not collapse)',
-      title1: 'title1',
-      title2: 'title2',
-      title3: 'title3',
-      title4: 'text test',
-      title5: 'fixed content',
-      title6: 'text content',
-      desc1: 'Nutui is a lightweight Vue component library with JD style',
-      desc2:
-        'The product has been comprehensively upgraded in terms of function, experience, ease of use and flexibility!',
-      desc3: 'Introduce new features of vue3, such as Composition API, teleport, emits, etc',
-      desc4: 'Full use of typescipt',
-      desc5: 'Build scenes based on JD design language system',
-      desc6: 'Improve the modularity and generality of the boundary',
-      desc7: 'It adopts combinatorial API composition syntax to reconstruct, with clear structure and modular function',
-      desc8: 'NUTUI3. 0 rethink its internal consistency and composability',
-      desc9: 'Improve the efficiency of production research output docking and reduce the output workload',
-      desc10: 'component emits events are extracted separately to enhance code readability',
-      desc11: 'reconstruct and mount class components using the new feature of teleport',
-      subtitle: 'subtitle'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic1: '基础用法',
+    basic2: '无icon样式',
+    basic3: '手风琴',
+    basic4: '自定义折叠图标',
+    basic5: '自定义标题图标',
+    basic6: '设置固定内容（不折叠）',
+    title1: '标题1',
+    title2: '标题2',
+    title3: '标题3',
+    title4: '文本测试',
+    title5: '固定内容',
+    title6: '文本内容',
+    desc1: 'NutUI是一套拥有京东风格的轻量级的 Vue 组件库',
+    desc2: '在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！',
+    desc3: '引入Vue3新特性 Composition API、Teleport、Emits 等',
+    desc4: '全面使用 TypeScipt',
+    desc5: '基于京东设计语言体系，构建场景',
+    desc6: '提高界⾯的模块化通用程度',
+    desc7: '采用组合式 API Composition 语法重构，结构清晰，功能模块化',
+    desc8: ' NUTUI3.0重新思考其内在的一致性和可组合性',
+    desc9: '提⾼产研输出对接的效率，降低输出工作量',
+    desc10: '组件 emits 事件单独提取，增强代码可读性',
+    desc11: '使用 Teleport 新特性重构挂载类组件',
+    subtitle: '副标题'
+  },
+  'en-US': {
+    basic1: 'Basic Usage',
+    basic2: 'No icon style',
+    basic3: 'accordion',
+    basic4: 'Custom collapse Icon',
+    basic5: 'Custom title Icon',
+    basic6: 'Set fixed content (do not collapse)',
+    title1: 'title1',
+    title2: 'title2',
+    title3: 'title3',
+    title4: 'text test',
+    title5: 'fixed content',
+    title6: 'text content',
+    desc1: 'Nutui is a lightweight Vue component library with JD style',
+    desc2:
+      'The product has been comprehensively upgraded in terms of function, experience, ease of use and flexibility!',
+    desc3: 'Introduce new features of vue3, such as Composition API, teleport, emits, etc',
+    desc4: 'Full use of typescipt',
+    desc5: 'Build scenes based on JD design language system',
+    desc6: 'Improve the modularity and generality of the boundary',
+    desc7: 'It adopts combinatorial API composition syntax to reconstruct, with clear structure and modular function',
+    desc8: 'NUTUI3. 0 rethink its internal consistency and composability',
+    desc9: 'Improve the efficiency of production research output docking and reduce the output workload',
+    desc10: 'component emits events are extracted separately to enhance code readability',
+    desc11: 'reconstruct and mount class components using the new feature of teleport',
+    subtitle: 'subtitle'
+  }
+});
 const data = reactive({
   active1: [1, 2],
   active2: 1,
diff --git a/src/packages/__VUE/comment/demo.vue b/src/packages/__VUE/comment/demo.vue
index 42f4ad373a..88b11c0fee 100644
--- a/src/packages/__VUE/comment/demo.vue
+++ b/src/packages/__VUE/comment/demo.vue
@@ -62,10 +62,8 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const { translate } = createComponent('comment');
-useTranslate({
+const translate = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     single: '评论图片单行展示',
diff --git a/src/packages/__VUE/configprovider/demo.vue b/src/packages/__VUE/configprovider/demo.vue
index bd418d1781..0fefd51c6c 100644
--- a/src/packages/__VUE/configprovider/demo.vue
+++ b/src/packages/__VUE/configprovider/demo.vue
@@ -83,66 +83,62 @@ import NutAddress from '../address/index.vue';
 import NutRadio from '../radio/index.vue';
 import NutCheckbox from '../checkbox/index.vue';
 import NutRadioGroup from '../radiogroup/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('configprovider');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      custom: '定制主题',
-      title1: '切换暗黑',
-      title2: '我是标题',
-      title3: '副标题描述',
-      desc: '描述文字',
-      address: '地址',
-      addressTip: '请输入地址',
-      addressTip1: '请选择地址',
-      addressTip2: '请选择所在地区',
-      remarks: '备注',
-      remarksTip: '请输入备注',
-      switch: '开关',
-      checkbox: '复选框',
-      radiogroup: '单选按钮',
-      option: (v: string) => '选项' + v,
-      rate: '评分',
-      inputnumber: '步进器',
-      range: '滑块',
-      uploader: '文件上传',
-      success: '上传成功',
-      uploading: '上传中...',
-      asyncValidator: '模拟异步验证中'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      custom: 'Custom Theme',
-      title1: 'Switch Dark Mode',
-      title2: 'Title',
-      title3: 'Subtitle Description',
-      desc: 'Description',
-      nameTip: 'Please enter your name',
-      address: 'Address',
-      addressTip: 'Please enter address',
-      addressTip1: 'Please select an address',
-      addressTip2: 'Please select your region',
-      remarks: 'Remarks',
-      remarksTip: 'Please enter remarks',
-      switch: 'Switch',
-      checkbox: 'Checkbox',
-      radiogroup: 'Radiogroup',
-      option: (v: string) => 'Option' + v,
-      rate: 'Rate',
-      inputnumber: 'Inputnumber',
-      range: 'Range',
-      uploader: 'Upload file',
-      success: 'Upload successful',
-      uploading: 'Uploading',
-      asyncValidator: 'Simulating asynchronous verification'
-    }
-  });
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    custom: '定制主题',
+    title1: '切换暗黑',
+    title2: '我是标题',
+    title3: '副标题描述',
+    desc: '描述文字',
+    address: '地址',
+    addressTip: '请输入地址',
+    addressTip1: '请选择地址',
+    addressTip2: '请选择所在地区',
+    remarks: '备注',
+    remarksTip: '请输入备注',
+    switch: '开关',
+    checkbox: '复选框',
+    radiogroup: '单选按钮',
+    option: (v: string) => '选项' + v,
+    rate: '评分',
+    inputnumber: '步进器',
+    range: '滑块',
+    uploader: '文件上传',
+    success: '上传成功',
+    uploading: '上传中...',
+    asyncValidator: '模拟异步验证中'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    custom: 'Custom Theme',
+    title1: 'Switch Dark Mode',
+    title2: 'Title',
+    title3: 'Subtitle Description',
+    desc: 'Description',
+    nameTip: 'Please enter your name',
+    address: 'Address',
+    addressTip: 'Please enter address',
+    addressTip1: 'Please select an address',
+    addressTip2: 'Please select your region',
+    remarks: 'Remarks',
+    remarksTip: 'Please enter remarks',
+    switch: 'Switch',
+    checkbox: 'Checkbox',
+    radiogroup: 'Radiogroup',
+    option: (v: string) => 'Option' + v,
+    rate: 'Rate',
+    inputnumber: 'Inputnumber',
+    range: 'Range',
+    uploader: 'Upload file',
+    success: 'Upload successful',
+    uploading: 'Uploading',
+    asyncValidator: 'Simulating asynchronous verification'
+  }
+});
 
-initTranslate();
 const checked = ref(false);
 const theme = ref('');
 const change = (v: boolean) => {
diff --git a/src/packages/__VUE/countdown/demo.vue b/src/packages/__VUE/countdown/demo.vue
index 7ada116499..caaa0d076a 100644
--- a/src/packages/__VUE/countdown/demo.vue
+++ b/src/packages/__VUE/countdown/demo.vue
@@ -77,47 +77,43 @@
 
 <script setup lang="ts">
 import { onMounted, ref, reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('countdown');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      format: '自定义格式',
-      millisecond: '毫秒级渲染',
-      serverTime: '以服务端的时间为准',
-      async: '异步更新结束时间',
-      controlTime: '控制开始和暂停的倒计时',
-      customStyle: '自定义展示样式',
-      handleControl: '手动控制',
-      start: '开始',
-      pause: '暂停',
-      reset: '重置',
-      day: '天',
-      hour: '时',
-      minute: '分',
-      second: '秒'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      format: 'Custom Format',
-      millisecond: 'Millisecond',
-      serverTime: 'Server Time Prevails',
-      async: 'End-Time of Asyn Update',
-      controlTime: 'Manual Control',
-      customStyle: 'Custom Style',
-      handleControl: 'Handle Control',
-      start: 'Start',
-      pause: 'Pause',
-      reset: 'Reset',
-      day: 'Day',
-      hour: ':',
-      minute: ':',
-      second: ''
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    format: '自定义格式',
+    millisecond: '毫秒级渲染',
+    serverTime: '以服务端的时间为准',
+    async: '异步更新结束时间',
+    controlTime: '控制开始和暂停的倒计时',
+    customStyle: '自定义展示样式',
+    handleControl: '手动控制',
+    start: '开始',
+    pause: '暂停',
+    reset: '重置',
+    day: '天',
+    hour: '时',
+    minute: '分',
+    second: '秒'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    format: 'Custom Format',
+    millisecond: 'Millisecond',
+    serverTime: 'Server Time Prevails',
+    async: 'End-Time of Asyn Update',
+    controlTime: 'Manual Control',
+    customStyle: 'Custom Style',
+    handleControl: 'Handle Control',
+    start: 'Start',
+    pause: 'Pause',
+    reset: 'Reset',
+    day: 'Day',
+    hour: ':',
+    minute: ':',
+    second: ''
+  }
+});
 const Countdown = ref<any>(null);
 const state = reactive({
   serverTime: Date.now() - 20 * 1000,
diff --git a/src/packages/__VUE/countup/demo.vue b/src/packages/__VUE/countup/demo.vue
index d10e8d8704..83adc4bc3a 100644
--- a/src/packages/__VUE/countup/demo.vue
+++ b/src/packages/__VUE/countup/demo.vue
@@ -48,29 +48,25 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('countup');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title: '数字滚动',
-      title1: '自定义滚动图片展示',
-      title2: '抽奖（模拟滚动抽奖）',
-      btn1: '中奖',
-      btn2: '不中奖'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title: 'Digital scrolling',
-      title1: 'Custom scrolling picture display',
-      title2: 'Lottery (simulated rolling lottery)',
-      btn1: 'win the lottery',
-      btn2: 'Not winning'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title: '数字滚动',
+    title1: '自定义滚动图片展示',
+    title2: '抽奖（模拟滚动抽奖）',
+    btn1: '中奖',
+    btn2: '不中奖'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title: 'Digital scrolling',
+    title1: 'Custom scrolling picture display',
+    title2: 'Lottery (simulated rolling lottery)',
+    btn1: 'win the lottery',
+    btn2: 'Not winning'
+  }
+});
 const data = reactive({
   customNumber: 618,
   bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png',
diff --git a/src/packages/__VUE/datepicker/demo.vue b/src/packages/__VUE/datepicker/demo.vue
index 38610e5676..1494e3c72e 100644
--- a/src/packages/__VUE/datepicker/demo.vue
+++ b/src/packages/__VUE/datepicker/demo.vue
@@ -109,58 +109,54 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('date-picker');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { showToast } from '@/packages/nutui.vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '选择日期',
-      showChinese: '显示中文',
-      mmdd: '选择月日',
-      showAll: '选择年月日时分',
-      time: '选择时分秒',
-      hourMinute: '选择时分',
-      format: '格式化选项',
-      stepMins: '分钟数递增步长设置',
-      filter: '过滤选项',
-      setStartEnd: '限制开始结束时间',
-      chooseDate: '日期时间选择',
-      chooseTime: '时间选择',
-      forever: '永远有效',
-      year: '年',
-      month: '月',
-      day: '日',
-      hour: '时',
-      min: '分',
-      seconds: '秒',
-      popupDesc: '搭配 Popup 使用'
-    },
-    'en-US': {
-      basic: 'Choose Date',
-      showChinese: 'Show Chinese',
-      mmdd: 'Choose Month-Day',
-      showAll: 'Choose DateTime',
-      time: 'Choose Time',
-      hourMinute: 'Choose Hour-Minute',
-      format: 'Option Formatter',
-      stepMins: 'Option Steps',
-      filter: 'Option Filter',
-      setStartEnd: 'Limit the start and end time',
-      chooseDate: 'Choose Time',
-      chooseTime: 'Choose Time',
-      forever: 'Forever',
-      year: 'Year',
-      month: 'Month',
-      day: 'Day',
-      hour: 'Hour',
-      min: 'Minute',
-      seconds: 'Second',
-      popupDesc: 'With Popup'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '选择日期',
+    showChinese: '显示中文',
+    mmdd: '选择月日',
+    showAll: '选择年月日时分',
+    time: '选择时分秒',
+    hourMinute: '选择时分',
+    format: '格式化选项',
+    stepMins: '分钟数递增步长设置',
+    filter: '过滤选项',
+    setStartEnd: '限制开始结束时间',
+    chooseDate: '日期时间选择',
+    chooseTime: '时间选择',
+    forever: '永远有效',
+    year: '年',
+    month: '月',
+    day: '日',
+    hour: '时',
+    min: '分',
+    seconds: '秒',
+    popupDesc: '搭配 Popup 使用'
+  },
+  'en-US': {
+    basic: 'Choose Date',
+    showChinese: 'Show Chinese',
+    mmdd: 'Choose Month-Day',
+    showAll: 'Choose DateTime',
+    time: 'Choose Time',
+    hourMinute: 'Choose Hour-Minute',
+    format: 'Option Formatter',
+    stepMins: 'Option Steps',
+    filter: 'Option Filter',
+    setStartEnd: 'Limit the start and end time',
+    chooseDate: 'Choose Time',
+    chooseTime: 'Choose Time',
+    forever: 'Forever',
+    year: 'Year',
+    month: 'Month',
+    day: 'Day',
+    hour: 'Hour',
+    min: 'Minute',
+    seconds: 'Second',
+    popupDesc: 'With Popup'
+  }
+});
 const show = ref(false);
 const popupDesc = ref();
 
diff --git a/src/packages/__VUE/dialog/demo.vue b/src/packages/__VUE/dialog/demo.vue
index 626bd8efbb..a4fffd9d51 100644
--- a/src/packages/__VUE/dialog/demo.vue
+++ b/src/packages/__VUE/dialog/demo.vue
@@ -41,49 +41,45 @@ import NutDialog from './index.vue';
 import { showDialog } from './index';
 import NutCell from '../cell/index.vue';
 import NutCellGroup from '../cellgroup/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('dialog');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      funUse: '函数式调用',
-      basic: '基础弹框',
-      transparent: '透明弹框',
-      html: '支持富文本 html',
-      beforeClose: '异步关闭',
-      noTitle: '无标题弹框',
-      tipDialog: '提示弹框',
-      tips: '提示',
-      title: '底部按钮 垂直使用',
-      title1: '标签式使用',
-      title2: 'Teleport 使用，挂载到指定节点',
-      content: '支持函数调用和组件调用两种方式。',
-      content1: '支持底部按钮纵向排列。',
-      content2: '打开开发者工具看一下 Elements Tab',
-      content3: '我可以是一个自定义组件',
-      content4: '点击确认后，1秒后关闭'
-    },
-    'en-US': {
-      funUse: 'Function use',
-      basic: 'Basic Usage',
-      transparent: 'Transparent Dialog',
-      html: 'Use html',
-      beforeClose: 'Before Close',
-      noTitle: 'No Title',
-      tipDialog: 'Tips Dialog',
-      tips: 'Tips',
-      title: 'Bottom button vertical use',
-      title1: 'Template use',
-      title2: 'Teleport use, mount to the specified element node',
-      content: 'Function call and template call are supported.',
-      content1: 'Support vertical arrangement of bottom buttons.',
-      content2: 'Open the developer tool and take a look at the Elements tab',
-      content3: 'I can be a custom component',
-      content4: 'Click confirm to close it in 1 second'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    funUse: '函数式调用',
+    basic: '基础弹框',
+    transparent: '透明弹框',
+    html: '支持富文本 html',
+    beforeClose: '异步关闭',
+    noTitle: '无标题弹框',
+    tipDialog: '提示弹框',
+    tips: '提示',
+    title: '底部按钮 垂直使用',
+    title1: '标签式使用',
+    title2: 'Teleport 使用，挂载到指定节点',
+    content: '支持函数调用和组件调用两种方式。',
+    content1: '支持底部按钮纵向排列。',
+    content2: '打开开发者工具看一下 Elements Tab',
+    content3: '我可以是一个自定义组件',
+    content4: '点击确认后，1秒后关闭'
+  },
+  'en-US': {
+    funUse: 'Function use',
+    basic: 'Basic Usage',
+    transparent: 'Transparent Dialog',
+    html: 'Use html',
+    beforeClose: 'Before Close',
+    noTitle: 'No Title',
+    tipDialog: 'Tips Dialog',
+    tips: 'Tips',
+    title: 'Bottom button vertical use',
+    title1: 'Template use',
+    title2: 'Teleport use, mount to the specified element node',
+    content: 'Function call and template call are supported.',
+    content1: 'Support vertical arrangement of bottom buttons.',
+    content2: 'Open the developer tool and take a look at the Elements tab',
+    content3: 'I can be a custom component',
+    content4: 'Click confirm to close it in 1 second'
+  }
+});
 const visible = ref(false);
 const visible1 = ref(false);
 
diff --git a/src/packages/__VUE/divider/demo.vue b/src/packages/__VUE/divider/demo.vue
index 82f7ea107d..1964243294 100644
--- a/src/packages/__VUE/divider/demo.vue
+++ b/src/packages/__VUE/divider/demo.vue
@@ -26,31 +26,27 @@
 
 <script setup lang="ts">
 import NutDivider from './index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('divider');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      withText: '展示文本',
-      contentPosition: '内容位置',
-      dashed: '虚线',
-      customStyle: '自定义样式',
-      verticalDivider: '垂直分割线',
-      text: '文本',
-      link: '链接'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      withText: 'With Text',
-      contentPosition: 'Content Position',
-      dashed: 'Dashed',
-      customStyle: 'Custom Style',
-      verticalDivider: 'Vertical Divider',
-      text: 'Text',
-      link: 'Link'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    withText: '展示文本',
+    contentPosition: '内容位置',
+    dashed: '虚线',
+    customStyle: '自定义样式',
+    verticalDivider: '垂直分割线',
+    text: '文本',
+    link: '链接'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    withText: 'With Text',
+    contentPosition: 'Content Position',
+    dashed: 'Dashed',
+    customStyle: 'Custom Style',
+    verticalDivider: 'Vertical Divider',
+    text: 'Text',
+    link: 'Link'
+  }
+});
 </script>
diff --git a/src/packages/__VUE/drag/demo.vue b/src/packages/__VUE/drag/demo.vue
index 4d4b527263..b006c6dcac 100644
--- a/src/packages/__VUE/drag/demo.vue
+++ b/src/packages/__VUE/drag/demo.vue
@@ -29,33 +29,29 @@
 <script setup lang="ts">
 import NutDrag from './index.vue';
 import NutButton from '../button/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('drag');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      dragBasic: '触摸移动',
-      direction: '限制拖拽方向',
-      directionX: '只能X轴拖动',
-      directionY: '只能Y轴拖动',
-      attract: '自动吸边',
-      attractText: '按钮',
-      limitBoundaries: '限制拖拽边界'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      dragBasic: 'Button',
-      direction: 'Limit Direction',
-      directionX: 'X axis',
-      directionY: 'Y axis',
-      attract: 'Attract',
-      attractText: 'Button',
-      limitBoundaries: 'Limit Boundaries'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    dragBasic: '触摸移动',
+    direction: '限制拖拽方向',
+    directionX: '只能X轴拖动',
+    directionY: '只能Y轴拖动',
+    attract: '自动吸边',
+    attractText: '按钮',
+    limitBoundaries: '限制拖拽边界'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    dragBasic: 'Button',
+    direction: 'Limit Direction',
+    directionX: 'X axis',
+    directionY: 'Y axis',
+    attract: 'Attract',
+    attractText: 'Button',
+    limitBoundaries: 'Limit Boundaries'
+  }
+});
 const right = () => {
   return document.documentElement.clientWidth - 300 - 9;
 };
diff --git a/src/packages/__VUE/ecard/demo.vue b/src/packages/__VUE/ecard/demo.vue
index b907d2dee8..7409b7a9b2 100644
--- a/src/packages/__VUE/ecard/demo.vue
+++ b/src/packages/__VUE/ecard/demo.vue
@@ -14,10 +14,8 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('ecard');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-useTranslate({
+const translate = useTranslate({
   'zh-CN': {
     basic: '基础用法'
   },
diff --git a/src/packages/__VUE/elevator/demo.vue b/src/packages/__VUE/elevator/demo.vue
index 58a7dba17f..804aa76dc5 100644
--- a/src/packages/__VUE/elevator/demo.vue
+++ b/src/packages/__VUE/elevator/demo.vue
@@ -39,106 +39,102 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
 import NutElevator from './index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('elevator');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Jd } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      customIndex: '自定义索引key',
-      sticky: '索引吸顶',
-      customContent: '自定义内容',
-      anhui: '安徽',
-      beijing: '北京',
-      guangxi: '广西',
-      guangdong: '广东',
-      hunan: '湖南',
-      hubei: '湖北',
-      shanghai: '上海',
-      shenzhen: '深圳',
-      guangzhou: '广州',
-      hangzhou: '杭州',
-      chengdu: '成都',
-      xian: '西安',
-      tianjin: '天津',
-      wuhan: '武汉',
-      changsha: '长沙',
-      chongqin: '重庆',
-      suzhou: '苏州',
-      nanjing: '南京',
-      xining: '西宁',
-      lanzhou: '兰州',
-      shijiazhuang: '石家庄',
-      qinhuangdao: '秦皇岛',
-      dalian: '大连',
-      haerbin: '哈尔滨',
-      changchun: '长春',
-      taiyuan: '太原',
-      fujian: '福建',
-      gansu: '甘肃',
-      guizhou: '贵州',
-      hainan: '海南',
-      hebei: '河北',
-      henan: '河南',
-      heilongjiang: '黑龙江',
-      jilin: '吉林',
-      jiangsu: '江苏',
-      jiangxi: '江西',
-      liaoning: '辽宁',
-      one: '一',
-      two: '二',
-      three: '三'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      customIndex: 'Custom index key',
-      sticky: 'Index ceiling',
-      customContent: 'Custom content',
-      anhui: 'AnHui',
-      beijing: 'BeiJing',
-      guangxi: 'GuangXi',
-      guangdong: 'GuangDong',
-      hunan: 'HuNan',
-      hubei: 'HuBei',
-      shanghai: 'ShangHai',
-      shenzhen: 'ShenZhen',
-      guangzhou: 'GuangZhou',
-      hangzhou: 'HangZhou',
-      chengdu: 'ChengDu',
-      xian: 'XiAn',
-      tianjin: 'TianJin',
-      wuhan: 'WuHan',
-      changsha: 'ChangSha',
-      chongqin: 'ChongQin',
-      suzhou: 'SuZhou',
-      nanjing: 'NanJing',
-      xining: 'XiNing',
-      lanzhou: 'LanZhou',
-      shijiazhuang: 'ShiJiaZhuang',
-      qinhuangdao: 'QinHuangDao',
-      dalian: 'DaLian',
-      haerbin: 'HaErBin',
-      changchun: 'ChangChun',
-      taiyuan: 'TaiYuan',
-      fujian: 'FuJian',
-      gansu: 'GanSu',
-      guizhou: 'GuiZhou',
-      hainan: 'HaiNan',
-      hebei: 'HeBei',
-      henan: 'HeNan',
-      heilongjiang: 'HeiLongJiang',
-      jilin: 'JiLin',
-      jiangsu: 'JiangSu',
-      jiangxi: 'JiangXi',
-      liaoning: 'LiaoNing',
-      one: 'one',
-      two: 'two',
-      three: 'three'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    customIndex: '自定义索引key',
+    sticky: '索引吸顶',
+    customContent: '自定义内容',
+    anhui: '安徽',
+    beijing: '北京',
+    guangxi: '广西',
+    guangdong: '广东',
+    hunan: '湖南',
+    hubei: '湖北',
+    shanghai: '上海',
+    shenzhen: '深圳',
+    guangzhou: '广州',
+    hangzhou: '杭州',
+    chengdu: '成都',
+    xian: '西安',
+    tianjin: '天津',
+    wuhan: '武汉',
+    changsha: '长沙',
+    chongqin: '重庆',
+    suzhou: '苏州',
+    nanjing: '南京',
+    xining: '西宁',
+    lanzhou: '兰州',
+    shijiazhuang: '石家庄',
+    qinhuangdao: '秦皇岛',
+    dalian: '大连',
+    haerbin: '哈尔滨',
+    changchun: '长春',
+    taiyuan: '太原',
+    fujian: '福建',
+    gansu: '甘肃',
+    guizhou: '贵州',
+    hainan: '海南',
+    hebei: '河北',
+    henan: '河南',
+    heilongjiang: '黑龙江',
+    jilin: '吉林',
+    jiangsu: '江苏',
+    jiangxi: '江西',
+    liaoning: '辽宁',
+    one: '一',
+    two: '二',
+    three: '三'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    customIndex: 'Custom index key',
+    sticky: 'Index ceiling',
+    customContent: 'Custom content',
+    anhui: 'AnHui',
+    beijing: 'BeiJing',
+    guangxi: 'GuangXi',
+    guangdong: 'GuangDong',
+    hunan: 'HuNan',
+    hubei: 'HuBei',
+    shanghai: 'ShangHai',
+    shenzhen: 'ShenZhen',
+    guangzhou: 'GuangZhou',
+    hangzhou: 'HangZhou',
+    chengdu: 'ChengDu',
+    xian: 'XiAn',
+    tianjin: 'TianJin',
+    wuhan: 'WuHan',
+    changsha: 'ChangSha',
+    chongqin: 'ChongQin',
+    suzhou: 'SuZhou',
+    nanjing: 'NanJing',
+    xining: 'XiNing',
+    lanzhou: 'LanZhou',
+    shijiazhuang: 'ShiJiaZhuang',
+    qinhuangdao: 'QinHuangDao',
+    dalian: 'DaLian',
+    haerbin: 'HaErBin',
+    changchun: 'ChangChun',
+    taiyuan: 'TaiYuan',
+    fujian: 'FuJian',
+    gansu: 'GanSu',
+    guizhou: 'GuiZhou',
+    hainan: 'HaiNan',
+    hebei: 'HeBei',
+    henan: 'HeNan',
+    heilongjiang: 'HeiLongJiang',
+    jilin: 'JiLin',
+    jiangsu: 'JiangSu',
+    jiangxi: 'JiangXi',
+    liaoning: 'LiaoNing',
+    one: 'one',
+    two: 'two',
+    three: 'three'
+  }
+});
 const state = reactive({
   acceptKey: 'num',
   dataList: [
diff --git a/src/packages/__VUE/ellipsis/demo.vue b/src/packages/__VUE/ellipsis/demo.vue
index 318bbd1b21..ae87af9c57 100644
--- a/src/packages/__VUE/ellipsis/demo.vue
+++ b/src/packages/__VUE/ellipsis/demo.vue
@@ -34,28 +34,24 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('ellipsis');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      header: '头部省略',
-      end: '尾部省略',
-      middle: '中间省略',
-      rows: '多行省略',
-      expand: '展开收起'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      header: 'Leading',
-      end: 'Tailing',
-      middle: 'Middle',
-      rows: 'Multi-line',
-      expand: 'Expand & Collapse'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    header: '头部省略',
+    end: '尾部省略',
+    middle: '中间省略',
+    rows: '多行省略',
+    expand: '展开收起'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    header: 'Leading',
+    end: 'Tailing',
+    middle: 'Middle',
+    rows: 'Multi-line',
+    expand: 'Expand & Collapse'
+  }
+});
 const content = ref(
   'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
 );
diff --git a/src/packages/__VUE/empty/demo.vue b/src/packages/__VUE/empty/demo.vue
index dc7d921156..d999cba119 100644
--- a/src/packages/__VUE/empty/demo.vue
+++ b/src/packages/__VUE/empty/demo.vue
@@ -42,39 +42,35 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('empty');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      noData: '无数据',
-      noContent: '无内容',
-      noNetWork: '无网络',
-      error: '加载失败/错误',
-      imageType: '图片类型',
-      description: '描述文字',
-      customImg: '自定义图片',
-      bottomContent: '底部内容',
-      fail: '加载失败',
-      retry: '重试'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      noData: 'no data',
-      noContent: 'no content',
-      noNetWork: 'no network',
-      error: 'error',
-      imageType: 'Image Type',
-      description: 'description',
-      customImg: 'Custom Image',
-      bottomContent: 'Bottom Content',
-      fail: 'Failed to load',
-      retry: 'Retry'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    noData: '无数据',
+    noContent: '无内容',
+    noNetWork: '无网络',
+    error: '加载失败/错误',
+    imageType: '图片类型',
+    description: '描述文字',
+    customImg: '自定义图片',
+    bottomContent: '底部内容',
+    fail: '加载失败',
+    retry: '重试'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    noData: 'no data',
+    noContent: 'no content',
+    noNetWork: 'no network',
+    error: 'error',
+    imageType: 'Image Type',
+    description: 'description',
+    customImg: 'Custom Image',
+    bottomContent: 'Bottom Content',
+    fail: 'Failed to load',
+    retry: 'Retry'
+  }
+});
 const tabValue = ref(0);
 </script>
 
diff --git a/src/packages/__VUE/fixednav/demo.vue b/src/packages/__VUE/fixednav/demo.vue
index 5202617b44..7a35be4b58 100644
--- a/src/packages/__VUE/fixednav/demo.vue
+++ b/src/packages/__VUE/fixednav/demo.vue
@@ -55,38 +55,34 @@
 import { computed, onMounted, ref } from 'vue';
 import NutFixedNav from './index.vue';
 import NutDrag from '../drag/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('fixednav');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Retweet } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      left1: '左侧收起',
-      left2: '左侧展开',
-      cus1: '关',
-      cus2: '开',
-      drag: '支持拖拽',
-      index: '首页',
-      category: '分类',
-      cart: '购物车',
-      my: '我的'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      left1: 'Left Closed',
-      left2: 'Left Open',
-      cus1: 'Closed',
-      cus2: 'Open',
-      drag: 'Drag',
-      index: 'Index',
-      category: 'Category',
-      cart: 'Cart',
-      my: 'My'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    left1: '左侧收起',
+    left2: '左侧展开',
+    cus1: '关',
+    cus2: '开',
+    drag: '支持拖拽',
+    index: '首页',
+    category: '分类',
+    cart: '购物车',
+    my: '我的'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    left1: 'Left Closed',
+    left2: 'Left Open',
+    cus1: 'Closed',
+    cus2: 'Open',
+    drag: 'Drag',
+    index: 'Index',
+    category: 'Category',
+    cart: 'Cart',
+    my: 'My'
+  }
+});
 const visible = ref(false);
 const visible1 = ref(false);
 const visible2 = ref(false);
diff --git a/src/packages/__VUE/form/demo.vue b/src/packages/__VUE/form/demo.vue
index 133009c515..b26b992b56 100644
--- a/src/packages/__VUE/form/demo.vue
+++ b/src/packages/__VUE/form/demo.vue
@@ -189,92 +189,88 @@
 <script setup lang="ts">
 import { showToast } from '@/packages/nutui.vue';
 import { reactive, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('form');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { FormItemRuleWithoutValidator } from '../formitem/types';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title1: '动态表单',
-      title2: '表单校验',
-      title3: '表单类型',
-      name: '姓名',
-      nameTip: '请输入姓名',
-      nameTip1: '请输入姓名，blur 事件校验',
-      age: '年龄',
-      ageTip: '请输入年龄',
-      ageTip1: '请输入年龄，必须数字且0-200区间',
-      ageTip2: '必须输入数字',
-      ageTip3: '必须输入0-200区间',
-      tel: '联系电话',
-      telTip: '请输入联系电话',
-      telTip1: '异步校验电话格式',
-      telTip2: '电话格式不正确',
-      address: '地址',
-      addressTip: '请输入地址',
-      addressTip1: '请选择地址',
-      addressTip2: '请选择所在地区',
-      remarks: '备注',
-      remarksTip: '请输入备注',
-      add: '添加',
-      remove: '删除',
-      submit: '提交',
-      reset: '重置提示状态',
-      switch: '开关',
-      checkbox: '复选框',
-      radiogroup: '单选按钮',
-      option: (v: string) => '选项' + v,
-      rate: '评分',
-      inputnumber: '步进器',
-      range: '滑块',
-      uploader: '文件上传',
-      success: '上传成功',
-      uploading: '上传中...',
-      asyncValidator: '模拟异步验证中'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title1: 'Dynamic Form',
-      title2: 'Validate Form',
-      title3: 'Form Type',
-      name: 'Name',
-      nameTip: 'Please enter your name',
-      nameTip1: 'Please enter , blur event validate',
-      age: 'Age',
-      ageTip: 'Please enter age',
-      ageTip1: 'Please enter the age, which must be numeric and in the range of 0-200',
-      ageTip2: 'You must enter a number',
-      ageTip3: 'The range 0-200 must be entered',
-      tel: 'Tel',
-      telTip: 'Please enter tel',
-      telTip1: 'Async check tel format',
-      telTip2: 'Tel format is incorrect',
-      address: 'Address',
-      addressTip: 'Please enter address',
-      addressTip1: 'Please select an address',
-      addressTip2: 'Please select your region',
-      remarks: 'Remarks',
-      remarksTip: 'Please enter remarks',
-      add: 'Add',
-      remove: 'Remove',
-      submit: 'Submit',
-      reset: 'Reset prompt status',
-      switch: 'Switch',
-      checkbox: 'Checkbox',
-      radiogroup: 'Radiogroup',
-      option: (v: string) => 'Option' + v,
-      rate: 'Rate',
-      inputnumber: 'Inputnumber',
-      range: 'Range',
-      uploader: 'Upload file',
-      success: 'Upload successful',
-      uploading: 'Uploading',
-      asyncValidator: 'Simulating asynchronous verification'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '动态表单',
+    title2: '表单校验',
+    title3: '表单类型',
+    name: '姓名',
+    nameTip: '请输入姓名',
+    nameTip1: '请输入姓名，blur 事件校验',
+    age: '年龄',
+    ageTip: '请输入年龄',
+    ageTip1: '请输入年龄，必须数字且0-200区间',
+    ageTip2: '必须输入数字',
+    ageTip3: '必须输入0-200区间',
+    tel: '联系电话',
+    telTip: '请输入联系电话',
+    telTip1: '异步校验电话格式',
+    telTip2: '电话格式不正确',
+    address: '地址',
+    addressTip: '请输入地址',
+    addressTip1: '请选择地址',
+    addressTip2: '请选择所在地区',
+    remarks: '备注',
+    remarksTip: '请输入备注',
+    add: '添加',
+    remove: '删除',
+    submit: '提交',
+    reset: '重置提示状态',
+    switch: '开关',
+    checkbox: '复选框',
+    radiogroup: '单选按钮',
+    option: (v: string) => '选项' + v,
+    rate: '评分',
+    inputnumber: '步进器',
+    range: '滑块',
+    uploader: '文件上传',
+    success: '上传成功',
+    uploading: '上传中...',
+    asyncValidator: '模拟异步验证中'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Dynamic Form',
+    title2: 'Validate Form',
+    title3: 'Form Type',
+    name: 'Name',
+    nameTip: 'Please enter your name',
+    nameTip1: 'Please enter , blur event validate',
+    age: 'Age',
+    ageTip: 'Please enter age',
+    ageTip1: 'Please enter the age, which must be numeric and in the range of 0-200',
+    ageTip2: 'You must enter a number',
+    ageTip3: 'The range 0-200 must be entered',
+    tel: 'Tel',
+    telTip: 'Please enter tel',
+    telTip1: 'Async check tel format',
+    telTip2: 'Tel format is incorrect',
+    address: 'Address',
+    addressTip: 'Please enter address',
+    addressTip1: 'Please select an address',
+    addressTip2: 'Please select your region',
+    remarks: 'Remarks',
+    remarksTip: 'Please enter remarks',
+    add: 'Add',
+    remove: 'Remove',
+    submit: 'Submit',
+    reset: 'Reset prompt status',
+    switch: 'Switch',
+    checkbox: 'Checkbox',
+    radiogroup: 'Radiogroup',
+    option: (v: string) => 'Option' + v,
+    rate: 'Rate',
+    inputnumber: 'Inputnumber',
+    range: 'Range',
+    uploader: 'Upload file',
+    success: 'Upload successful',
+    uploading: 'Uploading',
+    asyncValidator: 'Simulating asynchronous verification'
+  }
+});
 const formData = reactive({
   name: '',
   age: '',
diff --git a/src/packages/__VUE/grid/demo.vue b/src/packages/__VUE/grid/demo.vue
index 4db5526116..57a8f4e3d5 100644
--- a/src/packages/__VUE/grid/demo.vue
+++ b/src/packages/__VUE/grid/demo.vue
@@ -154,40 +154,36 @@
 import NutGrid from './index.vue';
 import NutGridItem from '../griditem/index.vue';
 import NutAvatar from '../avatar/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('grid');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Dongdong, Home, Search } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      text: '文字',
-      columnNum: '自定义列数',
-      square: '正方形格子',
-      gutter: '格子间距',
-      reverse: '内容翻转',
-      Horizontal: '内容横向',
-      iconStyle: '图标颜色/大小',
-      route: '页面导航',
-      customContent: '自定义内容',
-      vueRouter: '路由跳转',
-      url: '链接跳转'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      text: 'text',
-      columnNum: 'Column Num',
-      square: 'Square',
-      gutter: 'Gutter',
-      reverse: 'Reverse',
-      horizontal: 'Horizontal',
-      iconStyle: 'Icon Style',
-      route: 'Route',
-      customContent: 'Custom Content',
-      vueRouter: 'Vue Router',
-      url: 'URL'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    text: '文字',
+    columnNum: '自定义列数',
+    square: '正方形格子',
+    gutter: '格子间距',
+    reverse: '内容翻转',
+    Horizontal: '内容横向',
+    iconStyle: '图标颜色/大小',
+    route: '页面导航',
+    customContent: '自定义内容',
+    vueRouter: '路由跳转',
+    url: '链接跳转'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    text: 'text',
+    columnNum: 'Column Num',
+    square: 'Square',
+    gutter: 'Gutter',
+    reverse: 'Reverse',
+    horizontal: 'Horizontal',
+    iconStyle: 'Icon Style',
+    route: 'Route',
+    customContent: 'Custom Content',
+    vueRouter: 'Vue Router',
+    url: 'URL'
+  }
+});
 </script>
diff --git a/src/packages/__VUE/icon/demo.vue b/src/packages/__VUE/icon/demo.vue
index b3cddf58ed..6329b6164e 100644
--- a/src/packages/__VUE/icon/demo.vue
+++ b/src/packages/__VUE/icon/demo.vue
@@ -71,30 +71,26 @@
 import NutCell from '../cell/index.vue';
 import NutCellGroup from '../cellgroup/index.vue';
 import { useTranslate, currentLang } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: 'IconFont 基础用法',
-      svg: 'SVG 按需使用',
-      imageLink: '图片链接',
-      iconColor: '图标颜色',
-      iconSize: '图标大小',
-      copyToast: '复制成功'
-    },
-    'en-US': {
-      basic: 'IconFont Basic Usage',
-      svg: 'SVG import on demand',
-      imageLink: 'Image Link',
-      iconColor: 'Icon Color',
-      iconSize: 'Icon Size',
-      copyToast: 'Copied successfully'
-    }
-  });
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('icon');
+const translate = useTranslate({
+  'zh-CN': {
+    basic: 'IconFont 基础用法',
+    svg: 'SVG 按需使用',
+    imageLink: '图片链接',
+    iconColor: '图标颜色',
+    iconSize: '图标大小',
+    copyToast: '复制成功'
+  },
+  'en-US': {
+    basic: 'IconFont Basic Usage',
+    svg: 'SVG import on demand',
+    imageLink: 'Image Link',
+    iconColor: 'Icon Color',
+    iconSize: 'Icon Size',
+    copyToast: 'Copied successfully'
+  }
+});
 import { showToast } from '@/packages/nutui.vue';
 import { Add, IconFontConfig, IconFont } from '@nutui/icons-vue';
-initTranslate();
 const copyTag = (name: string) => {
   const text = `<IconFont name="${name}"></IconFont>`;
   const displayText = `&lt;IconFont name="${name}"&gt;&lt;/IconFont&gt;`;
diff --git a/src/packages/__VUE/image/demo.vue b/src/packages/__VUE/image/demo.vue
index a755f5743a..3d8063e29a 100644
--- a/src/packages/__VUE/image/demo.vue
+++ b/src/packages/__VUE/image/demo.vue
@@ -103,32 +103,28 @@ import NutImage from './index.vue';
 import NutCell from '../cell/index.vue';
 import NutCol from '../col/index.vue';
 import NutRow from '../row/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('image');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { ImageFit } from './type';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      fill: '填充模式',
-      position: '图片位置',
-      circle: '圆形图片',
-      loading: '加载中提示',
-      error: '加载失败',
-      lay: '懒加载'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      fill: 'Object Fill',
-      position: 'Object Position',
-      circle: 'Round',
-      loading: 'Loading',
-      error: 'Error',
-      lazy: 'Lazy Load'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    fill: '填充模式',
+    position: '图片位置',
+    circle: '圆形图片',
+    loading: '加载中提示',
+    error: '加载失败',
+    lay: '懒加载'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    fill: 'Object Fill',
+    position: 'Object Position',
+    circle: 'Round',
+    loading: 'Loading',
+    error: 'Error',
+    lazy: 'Lazy Load'
+  }
+});
 const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
 const fits = ref<ImageFit[]>(['contain', 'cover', 'fill', 'none', 'scale-down']);
 const position1 = ref(['left', 'center', 'right']);
diff --git a/src/packages/__VUE/imagepreview/demo.vue b/src/packages/__VUE/imagepreview/demo.vue
index 4f4bb3397c..415ab23f94 100644
--- a/src/packages/__VUE/imagepreview/demo.vue
+++ b/src/packages/__VUE/imagepreview/demo.vue
@@ -34,30 +34,26 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('image-preview');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { showImagePreview } from '@/packages/nutui.vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      withInitNo: '设置初始页码',
-      showPreview: '展示图片预览',
-      withPagination: '设置轮播指示器及颜色',
-      withVideos: '视频、图片预览',
-      functionalCall: '函数式调用'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      withInitNo: 'With Init No',
-      showPreview: 'Show Preview',
-      withPagination: 'With Pagination',
-      withVideos: 'With Videos',
-      functionalCall: 'Functional Call'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    withInitNo: '设置初始页码',
+    showPreview: '展示图片预览',
+    withPagination: '设置轮播指示器及颜色',
+    withVideos: '视频、图片预览',
+    functionalCall: '函数式调用'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    withInitNo: 'With Init No',
+    showPreview: 'Show Preview',
+    withPagination: 'With Pagination',
+    withVideos: 'With Videos',
+    functionalCall: 'Functional Call'
+  }
+});
 const resData = reactive({
   showPreview1: false,
   showPreview2: false,
diff --git a/src/packages/__VUE/indicator/demo.vue b/src/packages/__VUE/indicator/demo.vue
index 33dbe8f0d1..cd8ea44209 100644
--- a/src/packages/__VUE/indicator/demo.vue
+++ b/src/packages/__VUE/indicator/demo.vue
@@ -37,23 +37,19 @@ import NutCell from '../cell/index.vue';
 import NutButton from '../button/index.vue';
 import NutCol from '../col/index.vue';
 import NutRow from '../row/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('Indicator');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      button: '主要按钮',
-      title: 'block用法',
-      title2: '不补0'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      button: 'Main Button',
-      title: 'Block usage',
-      title2: 'Do not make up 0'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    button: '主要按钮',
+    title: 'block用法',
+    title2: '不补0'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    button: 'Main Button',
+    title: 'Block usage',
+    title2: 'Do not make up 0'
+  }
+});
 </script>
diff --git a/src/packages/__VUE/infiniteloading/demo.vue b/src/packages/__VUE/infiniteloading/demo.vue
index e9677adc2b..3b9f6a3330 100644
--- a/src/packages/__VUE/infiniteloading/demo.vue
+++ b/src/packages/__VUE/infiniteloading/demo.vue
@@ -31,29 +31,25 @@ import { onMounted, ref, reactive } from 'vue';
 import NutInfiniteLoading from './index.vue';
 import NutTabs from '../tabs/index.vue';
 import NutTabPane from '../tabpane/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('infinite-loading');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      pullRefresh: '下拉刷新',
-      customTxt: '自定义加载文案',
-      none: '没有啦~',
-      success: '刷新成功'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      pullRefresh: 'Pull to refresh',
-      customTxt: 'Custom loading copywriting',
-      none: 'No more',
-      success: 'Refresh success'
-    }
-  });
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    pullRefresh: '下拉刷新',
+    customTxt: '自定义加载文案',
+    none: '没有啦~',
+    success: '刷新成功'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    pullRefresh: 'Pull to refresh',
+    customTxt: 'Custom loading copywriting',
+    none: 'No more',
+    success: 'Refresh success'
+  }
+});
 
-initTranslate();
 const letter: string[] = [
   'A',
   'B',
diff --git a/src/packages/__VUE/input/demo.vue b/src/packages/__VUE/input/demo.vue
index 377e0933f8..bc68c10159 100644
--- a/src/packages/__VUE/input/demo.vue
+++ b/src/packages/__VUE/input/demo.vue
@@ -81,95 +81,91 @@
 import { reactive } from 'vue';
 import { Close, Ask } from '@nutui/icons-vue';
 import { showToast } from '@/packages/nutui.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('input');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title1: '自定义类型',
-      title2: '禁用和只读',
-      title3: '显示清除图标',
-      title4: '配合表单使用',
-      title5: '插入按钮',
-      title6: '格式化输入内容',
-      title7: '显示字数统计',
-      title8: '对齐方式',
-      title9: '无边框',
-      title10: '事件演示',
-      title11: '插槽演示',
-      text: '文本',
-      textPlaceholder: '请输入文本',
-      passwordPlaceholder: '请输入密码',
-      numberPlaceholder: '请输入数字（支持小数）',
-      digitPlaceholder: '请输入整数',
-      telPlaceholder: '请输入手机号',
-      readonly: '输入框只读',
-      disabled: '输入框已禁用',
-      icon: '显示图标',
-      clear: '显示清除图标',
-      clear2: '自定义清除图标',
-      required: '必填项',
-      error: '输入内容标红',
-      code: '短信验证码',
-      codePlaceholder: '请输入短信验证码',
-      sendCode: '发送验证码',
-      message: '请输入留言',
-      noBorder: '输入框无边框',
-      event: '事件演示',
-      slots: '插槽演示',
-      slotText: '获取验证码',
-      placeholder1: '在输入时执行格式化',
-      placeholder2: '在失焦时执行格式化',
-      placeholder3: '请输入留言',
-      placeholder4: '文本内容对齐',
-      placeholder5: '输入框内容对齐'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title1: 'Custom Type',
-      title2: 'Readonly And Disabled',
-      title3: 'Show Clear Icon',
-      title4: 'Use Form',
-      title5: 'Insert Button',
-      title6: 'Format Value',
-      title7: 'Show Word Limit',
-      title8: 'Input Align',
-      title9: 'No Border',
-      title10: 'Event Demo',
-      title11: 'Slots',
-      text: 'Text',
-      textPlaceholder: 'Text',
-      passwordPlaceholder: 'Password',
-      numberPlaceholder: 'Number (Support Decimals)',
-      digitPlaceholder: 'Digit',
-      telPlaceholder: 'Tel',
-      readonly: 'Readonly',
-      disabled: 'Disabled',
-      icon: 'Show Icon',
-      clear: 'Show Clear Icon',
-      clear2: 'Custom Clear Icon',
-      required: 'Required',
-      error: 'Error',
-      code: 'Code',
-      codePlaceholder: 'Please enter code',
-      sendCode: 'Send',
-      message: 'Message',
-      noBorder: 'No Border',
-      event: 'Event',
-      slots: 'Slots',
-      slotText: 'Verification Code',
-      placeholder1: 'Format On Change',
-      placeholder2: 'Format On Blur',
-      placeholder3: 'Message',
-      placeholder4: 'Label Align',
-      placeholder5: 'Input Align'
-    }
-  });
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '自定义类型',
+    title2: '禁用和只读',
+    title3: '显示清除图标',
+    title4: '配合表单使用',
+    title5: '插入按钮',
+    title6: '格式化输入内容',
+    title7: '显示字数统计',
+    title8: '对齐方式',
+    title9: '无边框',
+    title10: '事件演示',
+    title11: '插槽演示',
+    text: '文本',
+    textPlaceholder: '请输入文本',
+    passwordPlaceholder: '请输入密码',
+    numberPlaceholder: '请输入数字（支持小数）',
+    digitPlaceholder: '请输入整数',
+    telPlaceholder: '请输入手机号',
+    readonly: '输入框只读',
+    disabled: '输入框已禁用',
+    icon: '显示图标',
+    clear: '显示清除图标',
+    clear2: '自定义清除图标',
+    required: '必填项',
+    error: '输入内容标红',
+    code: '短信验证码',
+    codePlaceholder: '请输入短信验证码',
+    sendCode: '发送验证码',
+    message: '请输入留言',
+    noBorder: '输入框无边框',
+    event: '事件演示',
+    slots: '插槽演示',
+    slotText: '获取验证码',
+    placeholder1: '在输入时执行格式化',
+    placeholder2: '在失焦时执行格式化',
+    placeholder3: '请输入留言',
+    placeholder4: '文本内容对齐',
+    placeholder5: '输入框内容对齐'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Custom Type',
+    title2: 'Readonly And Disabled',
+    title3: 'Show Clear Icon',
+    title4: 'Use Form',
+    title5: 'Insert Button',
+    title6: 'Format Value',
+    title7: 'Show Word Limit',
+    title8: 'Input Align',
+    title9: 'No Border',
+    title10: 'Event Demo',
+    title11: 'Slots',
+    text: 'Text',
+    textPlaceholder: 'Text',
+    passwordPlaceholder: 'Password',
+    numberPlaceholder: 'Number (Support Decimals)',
+    digitPlaceholder: 'Digit',
+    telPlaceholder: 'Tel',
+    readonly: 'Readonly',
+    disabled: 'Disabled',
+    icon: 'Show Icon',
+    clear: 'Show Clear Icon',
+    clear2: 'Custom Clear Icon',
+    required: 'Required',
+    error: 'Error',
+    code: 'Code',
+    codePlaceholder: 'Please enter code',
+    sendCode: 'Send',
+    message: 'Message',
+    noBorder: 'No Border',
+    event: 'Event',
+    slots: 'Slots',
+    slotText: 'Verification Code',
+    placeholder1: 'Format On Change',
+    placeholder2: 'Format On Blur',
+    placeholder3: 'Message',
+    placeholder4: 'Label Align',
+    placeholder5: 'Input Align'
+  }
+});
 
-initTranslate();
 const state = reactive({
   val1: '',
   val2: '',
diff --git a/src/packages/__VUE/inputnumber/demo.vue b/src/packages/__VUE/inputnumber/demo.vue
index d4fad4047d..2bf09975f6 100644
--- a/src/packages/__VUE/inputnumber/demo.vue
+++ b/src/packages/__VUE/inputnumber/demo.vue
@@ -48,41 +48,37 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { Left, Right } from '@nutui/icons-vue';
 import { showToast } from '@/packages/nutui.vue';
-const { translate } = createComponent('input-number');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      step: '步长设置',
-      limit: '限制输入范围',
-      disable: '禁用操作',
-      readonly: '只读禁用输入框',
-      decimal: '支持小数',
-      async: '支持异步修改',
-      size: '自定义按钮大小',
-      icon: '自定义图标',
-      content1: '异步演示 2 秒后更改',
-      content2: '超出限制事件触发'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      step: 'Step size setting',
-      limit: 'Limit input range',
-      disable: 'Disable operation',
-      readonly: 'Read only disable input box',
-      decimal: 'Support decimal',
-      async: 'Support asynchronous modification',
-      size: 'Custom button size',
-      icon: 'Custom icon name',
-      content1: 'Asynchronous presentation changes in 2 seconds',
-      content2: 'Trigger of limit exceeding event'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    step: '步长设置',
+    limit: '限制输入范围',
+    disable: '禁用操作',
+    readonly: '只读禁用输入框',
+    decimal: '支持小数',
+    async: '支持异步修改',
+    size: '自定义按钮大小',
+    icon: '自定义图标',
+    content1: '异步演示 2 秒后更改',
+    content2: '超出限制事件触发'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    step: 'Step size setting',
+    limit: 'Limit input range',
+    disable: 'Disable operation',
+    readonly: 'Read only disable input box',
+    decimal: 'Support decimal',
+    async: 'Support asynchronous modification',
+    size: 'Custom button size',
+    icon: 'Custom icon name',
+    content1: 'Asynchronous presentation changes in 2 seconds',
+    content2: 'Trigger of limit exceeding event'
+  }
+});
 
 const state = reactive({
   val1: 1,
diff --git a/src/packages/__VUE/invoice/demo.vue b/src/packages/__VUE/invoice/demo.vue
index f44454197c..79646a45de 100644
--- a/src/packages/__VUE/invoice/demo.vue
+++ b/src/packages/__VUE/invoice/demo.vue
@@ -7,11 +7,9 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('invoice');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { showToast } from '@/packages/nutui.vue';
-useTranslate({
+const translate = useTranslate({
   'zh-CN': {
     basic: '基础用法'
   },
diff --git a/src/packages/__VUE/layout/demo.vue b/src/packages/__VUE/layout/demo.vue
index 42b2e36fef..173c2862a4 100644
--- a/src/packages/__VUE/layout/demo.vue
+++ b/src/packages/__VUE/layout/demo.vue
@@ -130,23 +130,19 @@
 <script setup lang="ts">
 import NutRow from '../row/index.vue';
 import NutCol from '../col/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('layout');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      desc: '分栏间隔',
-      flex: 'Flex布局'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      desc: 'Column spacing',
-      flex: 'Flex layout'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    desc: '分栏间隔',
+    flex: 'Flex布局'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    desc: 'Column spacing',
+    flex: 'Flex layout'
+  }
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/list/demo.vue b/src/packages/__VUE/list/demo.vue
index 9221830106..0463e192e5 100644
--- a/src/packages/__VUE/list/demo.vue
+++ b/src/packages/__VUE/list/demo.vue
@@ -14,19 +14,15 @@
 </template>
 <script setup lang="ts">
 import { onMounted, reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('list');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基本用法'
-    },
-    'en-US': {
-      basic: 'Basic Usage'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基本用法'
+  },
+  'en-US': {
+    basic: 'Basic Usage'
+  }
+});
 const state = reactive({
   count: new Array(100).fill(0)
 });
diff --git a/src/packages/__VUE/menu/demo.vue b/src/packages/__VUE/menu/demo.vue
index d0395641b3..8622e6debe 100644
--- a/src/packages/__VUE/menu/demo.vue
+++ b/src/packages/__VUE/menu/demo.vue
@@ -54,84 +54,80 @@ import { reactive, ref, computed } from 'vue';
 import NutMenu from './index.vue';
 import NutMenuItem from '../menuitem/index.vue';
 import NutButton from '../button/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('menu');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { TriangleDown, Checked } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      customMenuContent: '自定义菜单内容',
-      customContent: '自定义内容',
-      screen: '筛选',
-      confirm: '确认',
-      twoColsInOneLine: '一行两列',
-      customActiveColor: '自定义选中态颜色',
-      customIcons: '自定义图标',
-      expandDirection: '向上展开',
-      disableMenu: '禁用菜单',
-      allProducts: '全部商品',
-      newProducts: '新款商品',
-      activityProducts: '活动商品',
-      defaultSort: '默认排序',
-      praiseSort: '好评排序',
-      salesVolumeSort: '销量排序',
-      product1: '家庭清洁/纸品',
-      product2: '个人护理',
-      product3: '美妆护肤',
-      product4: '食品饮料',
-      product5: '家用电器',
-      product6: '母婴',
-      product7: '数码',
-      product8: '电脑、办公',
-      product9: '运动户外',
-      product10: '厨具',
-      product11: '医疗保健',
-      product12: '酒类',
-      product13: '生鲜',
-      product14: '家具',
-      product15: '传统滋补',
-      product16: '汽车用品',
-      product17: '家居日用'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      customMenuContent: 'Custom Menu Content',
-      customContent: 'Custom content',
-      screen: 'Screen',
-      confirm: 'Confirm',
-      twoColsInOneLine: 'Two Cols In One Line',
-      customActiveColor: 'Custom Active Color',
-      customIcons: 'Custom Icons',
-      expandDirection: 'Expand Direction',
-      disableMenu: 'Disable Menu',
-      allProducts: 'All Products',
-      newProducts: 'New Products',
-      activityProducts: 'Activity Products',
-      defaultSort: 'Default Sort',
-      praiseSort: 'Praise Sort',
-      salesVolumeSort: 'Sales Volume Sort',
-      product1: 'Product1',
-      product2: 'Product2',
-      product3: 'Product3',
-      product4: 'Product4',
-      product5: 'Product5',
-      product6: 'Product6',
-      product7: 'Product7',
-      product8: 'Product8',
-      product9: 'Product9',
-      product10: 'Product10',
-      product11: 'Product11',
-      product12: 'Product12',
-      product13: 'Product13',
-      product14: 'Product14',
-      product15: 'Product15',
-      product16: 'Product16',
-      product17: 'Product17'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    customMenuContent: '自定义菜单内容',
+    customContent: '自定义内容',
+    screen: '筛选',
+    confirm: '确认',
+    twoColsInOneLine: '一行两列',
+    customActiveColor: '自定义选中态颜色',
+    customIcons: '自定义图标',
+    expandDirection: '向上展开',
+    disableMenu: '禁用菜单',
+    allProducts: '全部商品',
+    newProducts: '新款商品',
+    activityProducts: '活动商品',
+    defaultSort: '默认排序',
+    praiseSort: '好评排序',
+    salesVolumeSort: '销量排序',
+    product1: '家庭清洁/纸品',
+    product2: '个人护理',
+    product3: '美妆护肤',
+    product4: '食品饮料',
+    product5: '家用电器',
+    product6: '母婴',
+    product7: '数码',
+    product8: '电脑、办公',
+    product9: '运动户外',
+    product10: '厨具',
+    product11: '医疗保健',
+    product12: '酒类',
+    product13: '生鲜',
+    product14: '家具',
+    product15: '传统滋补',
+    product16: '汽车用品',
+    product17: '家居日用'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    customMenuContent: 'Custom Menu Content',
+    customContent: 'Custom content',
+    screen: 'Screen',
+    confirm: 'Confirm',
+    twoColsInOneLine: 'Two Cols In One Line',
+    customActiveColor: 'Custom Active Color',
+    customIcons: 'Custom Icons',
+    expandDirection: 'Expand Direction',
+    disableMenu: 'Disable Menu',
+    allProducts: 'All Products',
+    newProducts: 'New Products',
+    activityProducts: 'Activity Products',
+    defaultSort: 'Default Sort',
+    praiseSort: 'Praise Sort',
+    salesVolumeSort: 'Sales Volume Sort',
+    product1: 'Product1',
+    product2: 'Product2',
+    product3: 'Product3',
+    product4: 'Product4',
+    product5: 'Product5',
+    product6: 'Product6',
+    product7: 'Product7',
+    product8: 'Product8',
+    product9: 'Product9',
+    product10: 'Product10',
+    product11: 'Product11',
+    product12: 'Product12',
+    product13: 'Product13',
+    product14: 'Product14',
+    product15: 'Product15',
+    product16: 'Product16',
+    product17: 'Product17'
+  }
+});
 const state = reactive({
   value1: 0,
   value2: 'a',
diff --git a/src/packages/__VUE/navbar/demo.vue b/src/packages/__VUE/navbar/demo.vue
index f6f1a205c0..080bc5eeac 100644
--- a/src/packages/__VUE/navbar/demo.vue
+++ b/src/packages/__VUE/navbar/demo.vue
@@ -71,42 +71,38 @@ import { ref } from 'vue';
 import NutNavbar from './index.vue';
 import NutTabs from '../tabs/index.vue';
 import NutTabPane from '../tabpane/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('navbar');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { ShareN, Cart2, MoreX, HorizontalN } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      title1: '基础用法',
-      back: '返回',
-      navTitle1: '订单详情',
-      navTitle2: '浏览记录',
-      desc1: '清空',
-      navTitle3: '购物车',
-      desc2: '编辑',
-      title2: '自定义导航栏中间内容',
-      tab1: '标题1',
-      tab2: '标题2',
-      tab3: '标题3',
-      title3: '多 tab 切换导航'
-    },
-    'en-US': {
-      title1: 'Basic Usage',
-      back: 'Back',
-      navTitle1: 'Order details',
-      navTitle2: 'Browsing history',
-      desc1: 'Clear',
-      navTitle3: 'Cart',
-      desc2: 'Edit',
-      title2: 'Customize the middle content of the navigation bar',
-      tab1: 'Title1',
-      tab2: 'Title2',
-      tab3: 'Title3',
-      title3: 'Multi-tab switching navigation'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    title1: '基础用法',
+    back: '返回',
+    navTitle1: '订单详情',
+    navTitle2: '浏览记录',
+    desc1: '清空',
+    navTitle3: '购物车',
+    desc2: '编辑',
+    title2: '自定义导航栏中间内容',
+    tab1: '标题1',
+    tab2: '标题2',
+    tab3: '标题3',
+    title3: '多 tab 切换导航'
+  },
+  'en-US': {
+    title1: 'Basic Usage',
+    back: 'Back',
+    navTitle1: 'Order details',
+    navTitle2: 'Browsing history',
+    desc1: 'Clear',
+    navTitle3: 'Cart',
+    desc2: 'Edit',
+    title2: 'Customize the middle content of the navigation bar',
+    tab1: 'Title1',
+    tab2: 'Title2',
+    tab3: 'Title3',
+    title3: 'Multi-tab switching navigation'
+  }
+});
 const tab1value = ref(0);
 const tab2value = ref(0);
 const back = () => {
diff --git a/src/packages/__VUE/notify/demo.vue b/src/packages/__VUE/notify/demo.vue
index d80f9c9325..a668c9f572 100644
--- a/src/packages/__VUE/notify/demo.vue
+++ b/src/packages/__VUE/notify/demo.vue
@@ -29,39 +29,35 @@ import NutNotify from './index.vue';
 import { showNotify } from './index';
 import NutCell from '../cell/index.vue';
 import NutCellGroup from '../cellgroup/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('notify');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      t1: '通知类型',
-      t2: '自定义',
-      t3: '自定义时长',
-      cusPostion: '自定义位置',
-      useTemplate: '组件调用',
-      primaryNotify: '主要通知',
-      successNotify: '成功通知',
-      errorNotify: '危险通知',
-      warningNotify: '警告通知',
-      cusBgNotify: '自定义背景色和字体颜色'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      t1: 'Notify Type',
-      t2: 'Custom',
-      t3: 'Custom Duration',
-      cusPostion: 'Custom Postion',
-      useTemplate: 'Template use',
-      primaryNotify: 'Primary Notify',
-      successNotify: 'Success Notify',
-      errorNotify: 'Error Notify',
-      warningNotify: 'Warning Notify',
-      cusBgNotify: 'Customize background and font colors'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    t1: '通知类型',
+    t2: '自定义',
+    t3: '自定义时长',
+    cusPostion: '自定义位置',
+    useTemplate: '组件调用',
+    primaryNotify: '主要通知',
+    successNotify: '成功通知',
+    errorNotify: '危险通知',
+    warningNotify: '警告通知',
+    cusBgNotify: '自定义背景色和字体颜色'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    t1: 'Notify Type',
+    t2: 'Custom',
+    t3: 'Custom Duration',
+    cusPostion: 'Custom Postion',
+    useTemplate: 'Template use',
+    primaryNotify: 'Primary Notify',
+    successNotify: 'Success Notify',
+    errorNotify: 'Error Notify',
+    warningNotify: 'Warning Notify',
+    cusBgNotify: 'Customize background and font colors'
+  }
+});
 const baseNotify = (msg: string) => {
   showNotify.text(msg, {
     onClose: () => {
diff --git a/src/packages/__VUE/numberkeyboard/demo.vue b/src/packages/__VUE/numberkeyboard/demo.vue
index 27b1f5401f..8b5f7579bc 100644
--- a/src/packages/__VUE/numberkeyboard/demo.vue
+++ b/src/packages/__VUE/numberkeyboard/demo.vue
@@ -60,34 +60,30 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { showToast } from '@/packages/nutui.vue';
-const { translate } = createComponent('number-keyboard');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '默认键盘',
-      sidebar: '带右侧栏键盘',
-      confirmText: '支付',
-      randomKeyOrder: '随机数键盘',
-      title: '标题',
-      withTitle: '带标题栏键盘',
-      idNumberKeyboard: '身份证键盘',
-      bindValue: '双向绑定：'
-    },
-    'en-US': {
-      basic: 'Default Keyboard',
-      sidebar: 'Keyboard With Sidebar',
-      confirmText: 'pay',
-      randomKeyOrder: 'Random Key Order',
-      title: 'title',
-      withTitle: 'Show Keyboard With Title',
-      idNumberKeyboard: 'Show IdNumber Keyboard',
-      bindValue: 'Bind Value：'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '默认键盘',
+    sidebar: '带右侧栏键盘',
+    confirmText: '支付',
+    randomKeyOrder: '随机数键盘',
+    title: '标题',
+    withTitle: '带标题栏键盘',
+    idNumberKeyboard: '身份证键盘',
+    bindValue: '双向绑定：'
+  },
+  'en-US': {
+    basic: 'Default Keyboard',
+    sidebar: 'Keyboard With Sidebar',
+    confirmText: 'pay',
+    randomKeyOrder: 'Random Key Order',
+    title: 'title',
+    withTitle: 'Show Keyboard With Title',
+    idNumberKeyboard: 'Show IdNumber Keyboard',
+    bindValue: 'Bind Value：'
+  }
+});
 const visible1 = ref(false);
 const visible2 = ref(false);
 const visible3 = ref(false);
diff --git a/src/packages/__VUE/overlay/demo.vue b/src/packages/__VUE/overlay/demo.vue
index 7a679151a8..66769b7739 100644
--- a/src/packages/__VUE/overlay/demo.vue
+++ b/src/packages/__VUE/overlay/demo.vue
@@ -46,35 +46,31 @@ import { reactive } from 'vue';
 import NutOverlay from './index.vue';
 import NutButton from '../button/index.vue';
 import NutCell from '../cell/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('overlay');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      style: '遮罩样式',
-      duration: '设置动画时间',
-      lockscroll: '锁定背景滚动',
-      content: '嵌套内容',
-      btn1: '显示遮罩层',
-      btn2: '嵌套内容',
-      text: '这里是正文',
-      closeClickLay: '点击遮罩不关闭'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      style: 'Mask style',
-      duration: 'Set animation time',
-      lockscroll: 'Lock Background Scroll',
-      content: 'Nested content',
-      btn1: 'Show mask layer',
-      btn2: 'Nested content',
-      text: 'Here is the text',
-      closeClickLay: 'Click the mask not to close'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    style: '遮罩样式',
+    duration: '设置动画时间',
+    lockscroll: '锁定背景滚动',
+    content: '嵌套内容',
+    btn1: '显示遮罩层',
+    btn2: '嵌套内容',
+    text: '这里是正文',
+    closeClickLay: '点击遮罩不关闭'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    style: 'Mask style',
+    duration: 'Set animation time',
+    lockscroll: 'Lock Background Scroll',
+    content: 'Nested content',
+    btn1: 'Show mask layer',
+    btn2: 'Nested content',
+    text: 'Here is the text',
+    closeClickLay: 'Click the mask not to close'
+  }
+});
 const state = reactive({
   show: false,
   show2: false,
diff --git a/src/packages/__VUE/pagination/demo.vue b/src/packages/__VUE/pagination/demo.vue
index bdc817d3e4..84b2aa328d 100644
--- a/src/packages/__VUE/pagination/demo.vue
+++ b/src/packages/__VUE/pagination/demo.vue
@@ -24,26 +24,22 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import NutPagination from './index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('pagination');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Left, Right } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      simpleMode: '简单模式',
-      showEllipses: '显示省略号',
-      customButton: '自定义按钮'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      simpleMode: 'Simple Mode',
-      showEllipses: 'Show ellipses',
-      customButton: 'Custom Button'
-    }
-  });
-initTranslate();
+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);
diff --git a/src/packages/__VUE/picker/demo.vue b/src/packages/__VUE/picker/demo.vue
index 7ba655c990..59efbaa745 100644
--- a/src/packages/__VUE/picker/demo.vue
+++ b/src/packages/__VUE/picker/demo.vue
@@ -67,14 +67,12 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { PickerOption } from './types';
-const { translate } = createComponent('picker');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Internation } from './doc.en';
 import { showToast } from '@/packages/nutui.vue';
 
-useTranslate(Internation);
+const translate = useTranslate(Internation);
 
 const selectedValue = ref(['ZheJiang']);
 const selectedTileValue = ref(['ZheJiang']);
diff --git a/src/packages/__VUE/popover/demo.vue b/src/packages/__VUE/popover/demo.vue
index 73dd715a27..bf3ea74979 100644
--- a/src/packages/__VUE/popover/demo.vue
+++ b/src/packages/__VUE/popover/demo.vue
@@ -116,42 +116,38 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref, h } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('popover');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Service, Notice, Location, Category, Scan2, Message, Cart2, My2 } from '@nutui/icons-vue';
 import { PopoverLocation } from './type';
 
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      title: '基础用法',
-      title1: '选项配置',
-      title2: '自定义内容',
-      title3: '位置自定义',
-      light: '明朗风格',
-      dark: '暗黑风格',
-      showIcon: '展示图标',
-      disableAction: '禁用选项',
-      content: '自定义内容',
-      contentColor: '自定义颜色',
-      contentTarget: '自定义目标元素'
-    },
-    'en-US': {
-      title: 'Basic Usage',
-      title1: 'Option Configuration',
-      title2: 'Custom Content',
-      title3: 'Custom Location',
-      light: 'light',
-      dark: 'dark',
-      showIcon: 'show icon',
-      disableAction: 'disabled',
-      content: 'custom content',
-      contentColor: 'custom color',
-      contentTarget: 'custom target'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    title: '基础用法',
+    title1: '选项配置',
+    title2: '自定义内容',
+    title3: '位置自定义',
+    light: '明朗风格',
+    dark: '暗黑风格',
+    showIcon: '展示图标',
+    disableAction: '禁用选项',
+    content: '自定义内容',
+    contentColor: '自定义颜色',
+    contentTarget: '自定义目标元素'
+  },
+  'en-US': {
+    title: 'Basic Usage',
+    title1: 'Option Configuration',
+    title2: 'Custom Content',
+    title3: 'Custom Location',
+    light: 'light',
+    dark: 'dark',
+    showIcon: 'show icon',
+    disableAction: 'disabled',
+    content: 'custom content',
+    contentColor: 'custom color',
+    contentTarget: 'custom target'
+  }
+});
 
 const state = reactive({
   showIcon: false,
diff --git a/src/packages/__VUE/popup/demo.vue b/src/packages/__VUE/popup/demo.vue
index 9847e99a7d..254db31afe 100644
--- a/src/packages/__VUE/popup/demo.vue
+++ b/src/packages/__VUE/popup/demo.vue
@@ -69,48 +69,44 @@
 import { ref } from 'vue';
 import NutPopup from './index.vue';
 import NutCell from '../cell/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('popup');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Heart } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      cell1: '展示弹出层',
-      text: '正文',
-      position: '弹出位置',
-      cell2: '顶部弹出',
-      cell3: '底部弹出',
-      cell4: '左侧弹出',
-      cell5: '右侧弹出',
-      close: '关闭图标',
-      iposition: '图标位置',
-      cicon: '自定义图标',
-      circle: '圆角弹框',
-      teleport: '指定挂载节点',
-      muti: '多层堆叠',
-      click: '点击它'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      cell1: 'Show pop-up layer',
-      text: 'text',
-      position: 'Eject position',
-      cell2: 'Top pop-up',
-      cell3: 'Bottom pop-up',
-      cell4: 'Left pop-up',
-      cell5: 'Right pop-up',
-      close: 'Close icon',
-      iposition: 'Icon location',
-      cicon: 'Custom icon',
-      circle: 'Rounded bullet frame',
-      teleport: 'Specify mount node',
-      muti: 'Multi stack',
-      click: 'Click it'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    cell1: '展示弹出层',
+    text: '正文',
+    position: '弹出位置',
+    cell2: '顶部弹出',
+    cell3: '底部弹出',
+    cell4: '左侧弹出',
+    cell5: '右侧弹出',
+    close: '关闭图标',
+    iposition: '图标位置',
+    cicon: '自定义图标',
+    circle: '圆角弹框',
+    teleport: '指定挂载节点',
+    muti: '多层堆叠',
+    click: '点击它'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    cell1: 'Show pop-up layer',
+    text: 'text',
+    position: 'Eject position',
+    cell2: 'Top pop-up',
+    cell3: 'Bottom pop-up',
+    cell4: 'Left pop-up',
+    cell5: 'Right pop-up',
+    close: 'Close icon',
+    iposition: 'Icon location',
+    cicon: 'Custom icon',
+    circle: 'Rounded bullet frame',
+    teleport: 'Specify mount node',
+    muti: 'Multi stack',
+    click: 'Click it'
+  }
+});
 const showBasic = ref(false);
 const showTop = ref(false);
 const showBottom = ref(false);
diff --git a/src/packages/__VUE/price/demo.vue b/src/packages/__VUE/price/demo.vue
index a921e11dd9..a0ca92af3f 100644
--- a/src/packages/__VUE/price/demo.vue
+++ b/src/packages/__VUE/price/demo.vue
@@ -35,29 +35,25 @@
 </template>
 
 <script setup lang="ts">
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('price');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      title1: '支持三种尺寸：small、normal、large',
-      title2: '不保留小数',
-      title3: '货币符号',
-      title4: '货币符号位置',
-      titleStrike: '划线价',
-      title5: '千位分隔',
-      symbol: '元'
-    },
-    'en-US': {
-      title1: 'Support three sizes：small、normal、large',
-      title2: 'No decimals',
-      title3: 'Currency symbol',
-      title4: 'Currency symbol position',
-      titleStrike: 'Strike Through',
-      title5: 'Separated by thousands',
-      symbol: 'RMB'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    title1: '支持三种尺寸：small、normal、large',
+    title2: '不保留小数',
+    title3: '货币符号',
+    title4: '货币符号位置',
+    titleStrike: '划线价',
+    title5: '千位分隔',
+    symbol: '元'
+  },
+  'en-US': {
+    title1: 'Support three sizes：small、normal、large',
+    title2: 'No decimals',
+    title3: 'Currency symbol',
+    title4: 'Currency symbol position',
+    titleStrike: 'Strike Through',
+    title5: 'Separated by thousands',
+    symbol: 'RMB'
+  }
+});
 </script>
diff --git a/src/packages/__VUE/progress/demo.vue b/src/packages/__VUE/progress/demo.vue
index dd14cd4e9d..7c8d207502 100644
--- a/src/packages/__VUE/progress/demo.vue
+++ b/src/packages/__VUE/progress/demo.vue
@@ -79,40 +79,36 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('progress');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Issue } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      customStyle: '设置颜色高度',
-      noShowPercentage: '设置百分比不显示',
-      showPercentage: '设置百分比外显',
-      showInsidePercentage: '设置百分比内显',
-      customContent: '设置百分比内显自定义内容',
-      customSize: '自定义尺寸',
-      statusDisplay: '设置状态显示',
-      dynamicChange: '动态改变',
-      reduce: '减少',
-      add: '增加'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      customStyle: 'Custom Style',
-      noShowPercentage: 'Don’t Show Percentage',
-      showPercentage: 'Percentage displayed outside',
-      showInsidePercentage: 'Percentage displayed inside',
-      customContent: 'Custom Content',
-      customSize: 'Custom Size',
-      statusDisplay: 'Status Display',
-      dynamicChange: 'Dynamic Change',
-      reduce: 'reduce',
-      add: 'add'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    customStyle: '设置颜色高度',
+    noShowPercentage: '设置百分比不显示',
+    showPercentage: '设置百分比外显',
+    showInsidePercentage: '设置百分比内显',
+    customContent: '设置百分比内显自定义内容',
+    customSize: '自定义尺寸',
+    statusDisplay: '设置状态显示',
+    dynamicChange: '动态改变',
+    reduce: '减少',
+    add: '增加'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    customStyle: 'Custom Style',
+    noShowPercentage: 'Don’t Show Percentage',
+    showPercentage: 'Percentage displayed outside',
+    showInsidePercentage: 'Percentage displayed inside',
+    customContent: 'Custom Content',
+    customSize: 'Custom Size',
+    statusDisplay: 'Status Display',
+    dynamicChange: 'Dynamic Change',
+    reduce: 'reduce',
+    add: 'add'
+  }
+});
 const val = ref(0);
 const setAddVal = () => {
   if (val.value >= 100) {
diff --git a/src/packages/__VUE/pullrefresh/demo.vue b/src/packages/__VUE/pullrefresh/demo.vue
index 02ea2bbca5..6ecab05cb6 100644
--- a/src/packages/__VUE/pullrefresh/demo.vue
+++ b/src/packages/__VUE/pullrefresh/demo.vue
@@ -39,38 +39,33 @@ import { ref, reactive } from 'vue';
 import NutPullRefresh from './index.vue';
 import NutTabs from '../tabs/index.vue';
 import NutTabPane from '../tabpane/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('pull-refresh');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { showToast } from '@/packages/nutui.vue';
 
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      pullRefresh: '下拉刷新',
-      customTxt: '自定义文案',
-      listenerTxt: '自定义监听对象',
-      content: '向下拉试试吧！',
-      loose: '松开吧',
-      load: '玩命加载中...',
-      ok: '好啦',
-      pull: '用力拉'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      pullRefresh: 'Pull to refresh',
-      customTxt: 'Custom Tips',
-      listenerTxt: 'Customize the listener',
-      content: 'Try to pull down!',
-      loose: 'Relax',
-      load: 'Desperate loading...',
-      ok: 'Ok!',
-      pull: 'Pull'
-    }
-  });
-
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    pullRefresh: '下拉刷新',
+    customTxt: '自定义文案',
+    listenerTxt: '自定义监听对象',
+    content: '向下拉试试吧！',
+    loose: '松开吧',
+    load: '玩命加载中...',
+    ok: '好啦',
+    pull: '用力拉'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    pullRefresh: 'Pull to refresh',
+    customTxt: 'Custom Tips',
+    listenerTxt: 'Customize the listener',
+    content: 'Try to pull down!',
+    loose: 'Relax',
+    load: 'Desperate loading...',
+    ok: 'Ok!',
+    pull: 'Pull'
+  }
+});
 
 const letter: any[] = [
   'A',
diff --git a/src/packages/__VUE/radio/demo.vue b/src/packages/__VUE/radio/demo.vue
index 90ddfaf330..85525f2d73 100644
--- a/src/packages/__VUE/radio/demo.vue
+++ b/src/packages/__VUE/radio/demo.vue
@@ -91,37 +91,33 @@
 </template>
 
 <script setup lang="ts">
-import { createComponent } from '@/packages/utils/create';
 import { reactive } from 'vue';
-const { translate } = createComponent('radio');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Checklist } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      option1: '选项1',
-      option2: '选项2',
-      option3: '选项3',
-      vertical: '水平使用',
-      size: '自定义尺寸',
-      icon: '自定义图标',
-      trigger: '触发事件',
-      current: '当前选中值'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      option1: 'Option 1',
-      option2: 'Option 2',
-      option3: 'Option 3',
-      vertical: 'Horizontal use',
-      size: 'Custom size',
-      icon: 'Custom icon',
-      trigger: 'Trigger event',
-      current: 'Currently selected value'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    option1: '选项1',
+    option2: '选项2',
+    option3: '选项3',
+    vertical: '水平使用',
+    size: '自定义尺寸',
+    icon: '自定义图标',
+    trigger: '触发事件',
+    current: '当前选中值'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    option1: 'Option 1',
+    option2: 'Option 2',
+    option3: 'Option 3',
+    vertical: 'Horizontal use',
+    size: 'Custom size',
+    icon: 'Custom icon',
+    trigger: 'Trigger event',
+    current: 'Currently selected value'
+  }
+});
 const state = reactive({
   radioVal: '1',
   radioVal2: '2',
diff --git a/src/packages/__VUE/range/demo.vue b/src/packages/__VUE/range/demo.vue
index 9077bfb225..6be9728ef8 100644
--- a/src/packages/__VUE/range/demo.vue
+++ b/src/packages/__VUE/range/demo.vue
@@ -90,41 +90,37 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { showToast } from '@/packages/nutui.vue';
-const { translate } = createComponent('range');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      title: '基础用法',
-      title1: '双滑块',
-      title2: '指定范围',
-      title3: '设置步长',
-      title4: '隐藏范围',
-      title5: '隐藏标签',
-      title6: '禁用',
-      title7: '自定义样式',
-      title8: '自定义按钮',
-      title9: '垂直方向',
-      title10: '刻度标记'
-    },
-    'en-US': {
-      title: 'Basic Usage',
-      title1: 'Dual thumb',
-      title2: 'Range',
-      title3: 'Step Size',
-      title4: 'Hidden Range',
-      title5: 'Hidden Tag',
-      title6: 'Disabled',
-      title7: 'Custom Style',
-      title8: 'Custom Button',
-      title9: 'Vertical',
-      title10: 'Marks'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    title: '基础用法',
+    title1: '双滑块',
+    title2: '指定范围',
+    title3: '设置步长',
+    title4: '隐藏范围',
+    title5: '隐藏标签',
+    title6: '禁用',
+    title7: '自定义样式',
+    title8: '自定义按钮',
+    title9: '垂直方向',
+    title10: '刻度标记'
+  },
+  'en-US': {
+    title: 'Basic Usage',
+    title1: 'Dual thumb',
+    title2: 'Range',
+    title3: 'Step Size',
+    title4: 'Hidden Range',
+    title5: 'Hidden Tag',
+    title6: 'Disabled',
+    title7: 'Custom Style',
+    title8: 'Custom Button',
+    title9: 'Vertical',
+    title10: 'Marks'
+  }
+});
 const state = reactive({
   value1: 40,
   value2: [20, 80],
diff --git a/src/packages/__VUE/rate/demo.vue b/src/packages/__VUE/rate/demo.vue
index c0da8e8fca..b4ed4ebc3d 100644
--- a/src/packages/__VUE/rate/demo.vue
+++ b/src/packages/__VUE/rate/demo.vue
@@ -34,36 +34,32 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
 import { HeartFill } from '@nutui/icons-vue';
-import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const { translate } = createComponent('rate');
 import { showToast } from '@/packages/nutui.vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title1: '半星',
-      title2: '自定义 icon',
-      title3: '自定义数量',
-      title4: '自定义颜色',
-      title5: '禁用状态',
-      title6: '只读状态',
-      title7: '绑定事件',
-      title8: '自定义尺寸 35px'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title1: 'Half Star',
-      title2: 'Custom icon',
-      title3: 'Custom quantity',
-      title4: 'Custom color',
-      title5: 'disabled state',
-      title6: 'read-only status',
-      title7: 'bind event',
-      title8: 'Custom size 35px'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '半星',
+    title2: '自定义 icon',
+    title3: '自定义数量',
+    title4: '自定义颜色',
+    title5: '禁用状态',
+    title6: '只读状态',
+    title7: '绑定事件',
+    title8: '自定义尺寸 35px'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Half Star',
+    title2: 'Custom icon',
+    title3: 'Custom quantity',
+    title4: 'Custom color',
+    title5: 'disabled state',
+    title6: 'read-only status',
+    title7: 'bind event',
+    title8: 'Custom size 35px'
+  }
+});
 const state = reactive({
   val: 3,
   val1: 3.5,
diff --git a/src/packages/__VUE/searchbar/demo.vue b/src/packages/__VUE/searchbar/demo.vue
index ac37198fb3..d0f1801ac9 100644
--- a/src/packages/__VUE/searchbar/demo.vue
+++ b/src/packages/__VUE/searchbar/demo.vue
@@ -57,42 +57,38 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { showToast } from '../toast';
 import { Search2, Left, Photograph, Message } from '@nutui/icons-vue';
-const { translate } = createComponent('searchbar');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic1: '基础用法',
-      basic2: '搜索事件监听',
-      basic3: '显示搜索 icon',
-      basic4: '右侧添加搜索文字',
-      basic5: '更改输入框内部及外部的背景样式',
-      basic6: '显示全部 icon',
-      basic7: '自定义清除图标 icon',
-      word1: '标签',
-      word2: '搜索',
-      title3: '标题3',
-      shape: '设置搜索框形状'
-    },
-    'en-US': {
-      basic1: 'Basic Usage',
-      basic2: 'Search event listening',
-      basic3: 'Display search Icon',
-      basic4: 'Add search text to the right',
-      basic5: 'Change the background style inside and outside the input box',
-      basic6: 'Show all icons',
-      basic7: 'custom clear button icon',
-      word1: 'label',
-      word2: 'search',
-      shape: 'Search input shape'
-    }
-  });
+const translate = useTranslate({
+  'zh-CN': {
+    basic1: '基础用法',
+    basic2: '搜索事件监听',
+    basic3: '显示搜索 icon',
+    basic4: '右侧添加搜索文字',
+    basic5: '更改输入框内部及外部的背景样式',
+    basic6: '显示全部 icon',
+    basic7: '自定义清除图标 icon',
+    word1: '标签',
+    word2: '搜索',
+    title3: '标题3',
+    shape: '设置搜索框形状'
+  },
+  'en-US': {
+    basic1: 'Basic Usage',
+    basic2: 'Search event listening',
+    basic3: 'Display search Icon',
+    basic4: 'Add search text to the right',
+    basic5: 'Change the background style inside and outside the input box',
+    basic6: 'Show all icons',
+    basic7: 'custom clear button icon',
+    word1: 'label',
+    word2: 'search',
+    shape: 'Search input shape'
+  }
+});
 const icon =
   'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
-initTranslate();
 const state = reactive({
   searchValue: '',
   searchValue1: '',
diff --git a/src/packages/__VUE/shortpassword/demo.vue b/src/packages/__VUE/shortpassword/demo.vue
index 33129a06ee..accad866af 100644
--- a/src/packages/__VUE/shortpassword/demo.vue
+++ b/src/packages/__VUE/shortpassword/demo.vue
@@ -79,36 +79,32 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { showToast } from '@/packages/nutui.vue';
-const { translate } = createComponent('short-password');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      showButtonGroup: '显示按钮组',
-      customPasswordLength: '自定义密码长度',
-      forgetPassword: '忘记密码',
-      errorMessage: '错误提示语',
-      customErrorMsg: '请输入正确密码',
-      onTips: '执行密码忘记逻辑',
-      close: '点击icon关闭弹窗',
-      cancelTips: '点击取消按钮关闭弹窗'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      showButtonGroup: 'Show Button Group',
-      customPasswordLength: 'Custom Password Length',
-      forgetPassword: 'Forget Password',
-      errorMessage: 'Error Message',
-      customErrorMsg: 'Please enter correct password',
-      onTips: 'Execute forgotten password logic',
-      close: 'Click the icon to close the popup',
-      cancelTips: 'Click the Cancel button to close the popup'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    showButtonGroup: '显示按钮组',
+    customPasswordLength: '自定义密码长度',
+    forgetPassword: '忘记密码',
+    errorMessage: '错误提示语',
+    customErrorMsg: '请输入正确密码',
+    onTips: '执行密码忘记逻辑',
+    close: '点击icon关闭弹窗',
+    cancelTips: '点击取消按钮关闭弹窗'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    showButtonGroup: 'Show Button Group',
+    customPasswordLength: 'Custom Password Length',
+    forgetPassword: 'Forget Password',
+    errorMessage: 'Error Message',
+    customErrorMsg: 'Please enter correct password',
+    onTips: 'Execute forgotten password logic',
+    close: 'Click the icon to close the popup',
+    cancelTips: 'Click the Cancel button to close the popup'
+  }
+});
 
 const state = reactive({
   visible1: false,
diff --git a/src/packages/__VUE/sidenavbar/demo.vue b/src/packages/__VUE/sidenavbar/demo.vue
index d44c45f181..ff09b96031 100644
--- a/src/packages/__VUE/sidenavbar/demo.vue
+++ b/src/packages/__VUE/sidenavbar/demo.vue
@@ -84,60 +84,56 @@ import NutSideNavbarItem from '../sidenavbaritem/index.vue';
 import NutSubSideNavbar from '../subsidenavbar/index.vue';
 import NutPopup from '../popup/index.vue';
 import NutCell from '../cell/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('side-navbar');
 import { showToast } from '@/packages/nutui.vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title1: '智能城市AI',
-      title2: '人体识别1',
-      title3: '人体检测1',
-      title4: '细粒度人像分割1',
-      title5: '人体检测2',
-      title6: '细粒度人像分割2',
-      title7: '图像理解',
-      title8: '菜品识别',
-      title9: '拍照购',
-      title10: '自然语言处理',
-      title11: '词法分析',
-      title12: '句法分析',
-      title13: '人脸识别',
-      title14: '企业风险预警模型',
-      title15: '水质量检测',
-      title16: '人体识别2',
-      left: '左侧',
-      right: '右侧',
-      show: '显示',
-      nest: '导航嵌套（建议最多三层）,点击第一条回调'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title1: 'Intelligent City Ai',
-      title2: 'Human body recognition 1',
-      title3: 'Human testing 1',
-      title4: 'Fine grained portrait segment 1',
-      title5: 'Human testing 2',
-      title6: 'Fine grained portrait segment 2',
-      title7: 'image understanding',
-      title8: 'Dish identification',
-      title9: 'Photo shopping',
-      title10: 'natural language processing',
-      title11: 'lexical analysis',
-      title12: 'Syntactic analysis',
-      title13: 'Face recognition',
-      title14: 'Enterprise risk early warning model',
-      title15: 'Water quality inspection',
-      title16: 'Human body recognition 2',
-      left: 'left',
-      right: 'right',
-      show: 'show',
-      nest: 'Navigation nesting (up to three layers are recommended), and click the first callback'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '智能城市AI',
+    title2: '人体识别1',
+    title3: '人体检测1',
+    title4: '细粒度人像分割1',
+    title5: '人体检测2',
+    title6: '细粒度人像分割2',
+    title7: '图像理解',
+    title8: '菜品识别',
+    title9: '拍照购',
+    title10: '自然语言处理',
+    title11: '词法分析',
+    title12: '句法分析',
+    title13: '人脸识别',
+    title14: '企业风险预警模型',
+    title15: '水质量检测',
+    title16: '人体识别2',
+    left: '左侧',
+    right: '右侧',
+    show: '显示',
+    nest: '导航嵌套（建议最多三层）,点击第一条回调'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Intelligent City Ai',
+    title2: 'Human body recognition 1',
+    title3: 'Human testing 1',
+    title4: 'Fine grained portrait segment 1',
+    title5: 'Human testing 2',
+    title6: 'Fine grained portrait segment 2',
+    title7: 'image understanding',
+    title8: 'Dish identification',
+    title9: 'Photo shopping',
+    title10: 'natural language processing',
+    title11: 'lexical analysis',
+    title12: 'Syntactic analysis',
+    title13: 'Face recognition',
+    title14: 'Enterprise risk early warning model',
+    title15: 'Water quality inspection',
+    title16: 'Human body recognition 2',
+    left: 'left',
+    right: 'right',
+    show: 'show',
+    nest: 'Navigation nesting (up to three layers are recommended), and click the first callback'
+  }
+});
 
 const show1 = ref(false);
 const show2 = ref(false);
diff --git a/src/packages/__VUE/signature/demo.vue b/src/packages/__VUE/signature/demo.vue
index b60682bbe6..8467d6a236 100644
--- a/src/packages/__VUE/signature/demo.vue
+++ b/src/packages/__VUE/signature/demo.vue
@@ -21,10 +21,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('signature');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-useTranslate({
+const translate = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     title: '修改颜色和签字粗细',
diff --git a/src/packages/__VUE/skeleton/demo.vue b/src/packages/__VUE/skeleton/demo.vue
index e7342b8c92..6aadeb9492 100644
--- a/src/packages/__VUE/skeleton/demo.vue
+++ b/src/packages/__VUE/skeleton/demo.vue
@@ -45,32 +45,28 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('skeleton');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title: '传入多行',
-      title1: '显示头像',
-      title2: '标题段落圆角风格',
-      title3: '图片组合',
-      title4: '显示子组件',
-      desc: '一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title: 'Incoming multiline',
-      title1: 'Show Faces',
-      title2: 'Title paragraph fillet style',
-      title3: 'Picture combination',
-      title4: 'Display subcomponents',
-      desc: 'A set of JD style lightweight mobile terminal Vue group library provides rich basic components and business components to help developers quickly build mobile applications.'
-    }
-  });
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title: '传入多行',
+    title1: '显示头像',
+    title2: '标题段落圆角风格',
+    title3: '图片组合',
+    title4: '显示子组件',
+    desc: '一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title: 'Incoming multiline',
+    title1: 'Show Faces',
+    title2: 'Title paragraph fillet style',
+    title3: 'Picture combination',
+    title4: 'Display subcomponents',
+    desc: 'A set of JD style lightweight mobile terminal Vue group library provides rich basic components and business components to help developers quickly build mobile applications.'
+  }
+});
 
-initTranslate();
 const checked = ref(false);
 </script>
 
diff --git a/src/packages/__VUE/sku/demo.vue b/src/packages/__VUE/sku/demo.vue
index b825a08cdf..a803ad1c78 100644
--- a/src/packages/__VUE/sku/demo.vue
+++ b/src/packages/__VUE/sku/demo.vue
@@ -105,11 +105,9 @@
 
 <script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { showToast } from '@/packages/nutui.vue';
-const { translate } = createComponent('sku');
-useTranslate({
+const translate = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     noSell: '不可售',
diff --git a/src/packages/__VUE/space/demo.vue b/src/packages/__VUE/space/demo.vue
index 30ce0e2b1a..7be44d412e 100644
--- a/src/packages/__VUE/space/demo.vue
+++ b/src/packages/__VUE/space/demo.vue
@@ -49,26 +49,22 @@
 </template>
 
 <script lang="ts" setup>
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('cell');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      title1: '基础用法：默认间距为 8px',
-      title2: '垂直排列',
-      title3: '自定义间距',
-      title4: '自动换行',
-      btn: '按钮'
-    },
-    'en-US': {
-      title1: 'Grammar and Usage：The default spacing is 8px',
-      title2: 'Vertical Alignment',
-      title3: 'Custom spacing',
-      title4: 'word wrap',
-      btn: 'Button'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    title1: '基础用法：默认间距为 8px',
+    title2: '垂直排列',
+    title3: '自定义间距',
+    title4: '自动换行',
+    btn: '按钮'
+  },
+  'en-US': {
+    title1: 'Grammar and Usage：The default spacing is 8px',
+    title2: 'Vertical Alignment',
+    title3: 'Custom spacing',
+    title4: 'word wrap',
+    btn: 'Button'
+  }
+});
 </script>
diff --git a/src/packages/__VUE/steps/demo.vue b/src/packages/__VUE/steps/demo.vue
index 2319026de6..9376b254ee 100644
--- a/src/packages/__VUE/steps/demo.vue
+++ b/src/packages/__VUE/steps/demo.vue
@@ -2,7 +2,7 @@
   <div class="demo padding">
     <h2>{{ translate('basic') }}</h2>
     <div class="steps-wrapper">
-      <nut-steps :current="current1" @click-step="handleClickStep">
+      <nut-steps :current="state.current1" @click-step="handleClickStep">
         <nut-step :title="translate('step1')">
           1
           <template #title>{{ translate('step1') }}</template>
@@ -16,7 +16,7 @@
     </div>
     <h2>{{ translate('basicDot') }}</h2>
     <div class="steps-wrapper">
-      <nut-steps :current="current2" progress-dot>
+      <nut-steps :current="state.current2" progress-dot>
         <nut-step></nut-step>
         <nut-step></nut-step>
         <nut-step></nut-step>
@@ -27,7 +27,7 @@
     </div>
     <h2>{{ translate('desc') }}</h2>
     <div class="steps-wrapper">
-      <nut-steps :current="current3">
+      <nut-steps :current="state.current3">
         <nut-step :content="translate('stepdesc')" :title="translate('step1')">1</nut-step>
         <nut-step :content="translate('stepdesc')" :title="translate('step2')"></nut-step>
         <nut-step :content="translate('stepdesc')" :title="translate('step3')"></nut-step>
@@ -38,7 +38,7 @@
     </div>
     <h2>{{ translate('cicon') }}</h2>
     <div class="steps-wrapper">
-      <nut-steps :current="current4">
+      <nut-steps :current="state.current4">
         <nut-step :title="translate('complete')">
           <template #icon>
             <Service />
@@ -84,92 +84,74 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Service, People, Location2 } from '@nutui/icons-vue';
-
-const { translate } = createComponent('steps');
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      basicDot: '基础用法（点状）',
-      step1: '步骤一',
-      step2: '步骤二',
-      step3: '步骤三',
-      desc: '标题和描述信息',
-      stepdesc: '步骤描述',
-      next: '下一步',
-      cicon: '自定义图标',
-      complete: '已完成',
-      progress: '进行中',
-      start: '未开始',
-      content1: '您的订单已经打包完成，商品已发出',
-      content2: '您的订单正在配送途中',
-      content3: '收货地址为：北京市经济技术开发区科创十一街18号院京东大厦',
-      content4: '收货地址为',
-      content5: '北京市经济技术开发区科创十一街18号院京东大厦',
-      verstep: '竖向步骤条',
-      verstepDot: '点状步骤和垂直方向'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      basicDot: 'Basic Usage(Dot)',
-      step1: 'Step One',
-      step2: 'Step Two',
-      step3: 'Step Three',
-      desc: 'Title and description information',
-      stepdesc: 'Step description',
-      next: 'next step',
-      cicon: 'Custom Icon',
-      complete: 'Completed',
-      progress: 'In progress',
-      start: 'Not started',
-      content1: 'Your order has been packaged and the goods have been delivered',
-      content2: 'Your order is in transit',
-      content3:
-        'The receiving address is Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone',
-      content4: 'The receiving address is',
-      content5: 'Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone',
-      verstep: 'Vertical step bar',
-      verstepDot: 'Point steps and vertical orientation'
-    }
-  });
-export default defineComponent({
-  components: { Service, People, Location2 },
-  props: {},
-  setup() {
-    initTranslate();
-    const state = reactive({
-      current1: 1,
-      current2: 1,
-      current3: 1,
-      current4: 1,
-      current5: 1
-    });
-
-    const handleStep = (params: 'current1' | 'current2' | 'current3' | 'current4') => {
-      if (state[params] >= 3) {
-        state[params] = 1;
-      } else {
-        state[params] += 1;
-      }
-    };
-
-    const handleClickStep = (index: number) => {
-      console.log(index);
-    };
-
-    return {
-      ...toRefs(state),
-      handleStep,
-      handleClickStep,
-      translate
-    };
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    basicDot: '基础用法（点状）',
+    step1: '步骤一',
+    step2: '步骤二',
+    step3: '步骤三',
+    desc: '标题和描述信息',
+    stepdesc: '步骤描述',
+    next: '下一步',
+    cicon: '自定义图标',
+    complete: '已完成',
+    progress: '进行中',
+    start: '未开始',
+    content1: '您的订单已经打包完成，商品已发出',
+    content2: '您的订单正在配送途中',
+    content3: '收货地址为：北京市经济技术开发区科创十一街18号院京东大厦',
+    content4: '收货地址为',
+    content5: '北京市经济技术开发区科创十一街18号院京东大厦',
+    verstep: '竖向步骤条',
+    verstepDot: '点状步骤和垂直方向'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    basicDot: 'Basic Usage(Dot)',
+    step1: 'Step One',
+    step2: 'Step Two',
+    step3: 'Step Three',
+    desc: 'Title and description information',
+    stepdesc: 'Step description',
+    next: 'next step',
+    cicon: 'Custom Icon',
+    complete: 'Completed',
+    progress: 'In progress',
+    start: 'Not started',
+    content1: 'Your order has been packaged and the goods have been delivered',
+    content2: 'Your order is in transit',
+    content3:
+      'The receiving address is Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone',
+    content4: 'The receiving address is',
+    content5: 'Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological Development Zone',
+    verstep: 'Vertical step bar',
+    verstepDot: 'Point steps and vertical orientation'
   }
 });
+const state = reactive({
+  current1: 1,
+  current2: 1,
+  current3: 1,
+  current4: 1,
+  current5: 1
+});
+
+const handleStep = (params: 'current1' | 'current2' | 'current3' | 'current4') => {
+  if (state[params] >= 3) {
+    state[params] = 1;
+  } else {
+    state[params] += 1;
+  }
+};
+
+const handleClickStep = (index: number) => {
+  console.log(index);
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/sticky/demo.vue b/src/packages/__VUE/sticky/demo.vue
index db06916e1b..964156872e 100644
--- a/src/packages/__VUE/sticky/demo.vue
+++ b/src/packages/__VUE/sticky/demo.vue
@@ -26,26 +26,22 @@
 import { ref } from 'vue';
 import NutSticky from './index.vue';
 import NutButton from '../button/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('sticky');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title1: '吸顶距离',
-      title2: '指定容器',
-      title3: '吸底距离',
-      content: '吸顶按钮'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title1: 'Ceiling distance',
-      title2: 'Specify container',
-      title3: 'Suction distance',
-      content: 'Ceiling button'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '吸顶距离',
+    title2: '指定容器',
+    title3: '吸底距离',
+    content: '吸顶按钮'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Ceiling distance',
+    title2: 'Specify container',
+    title3: 'Suction distance',
+    content: 'Ceiling button'
+  }
+});
 const container = ref<HTMLElement>();
 </script>
diff --git a/src/packages/__VUE/swipe/demo.vue b/src/packages/__VUE/swipe/demo.vue
index 4224f2539a..c7addf9efe 100644
--- a/src/packages/__VUE/swipe/demo.vue
+++ b/src/packages/__VUE/swipe/demo.vue
@@ -84,47 +84,43 @@ import NutCell from '../cell/index.vue';
 import NutButton from '../button/index.vue';
 import NutInputNumber from '../inputnumber/index.vue';
 import NutSwitch from '../switch/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('swipe');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      leftDel: '左滑删除',
-      disable: '禁用滑动',
-      swipeLR: '左右滑动',
-      swipeLRDesc: '左滑右滑都可以哦',
-      async: '异步控制',
-      asyncDesc: '异步打开关闭',
-      open: '开',
-      close: '关',
-      custom: '自定义',
-      desc: '商品描述',
-      delete: '删除',
-      select: '选择',
-      collect: '收藏',
-      group: '使用 SwipeGroup 控制 Swipe 之间互斥'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      leftDel: 'Swipe left to delete',
-      disable: 'Disable swipe',
-      swipeLR: 'Swipe left and right',
-      swipeLRDesc: 'You can swipe left and right',
-      async: 'Async control swipe',
-      asyncDesc: 'Async on and off',
-      open: 'on',
-      close: 'off',
-      custom: 'Custom',
-      desc: 'product description',
-      delete: 'Delelte',
-      select: 'Select',
-      collect: 'Collect',
-      group: 'Use SwipeGroup to make swipe exclusive'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    leftDel: '左滑删除',
+    disable: '禁用滑动',
+    swipeLR: '左右滑动',
+    swipeLRDesc: '左滑右滑都可以哦',
+    async: '异步控制',
+    asyncDesc: '异步打开关闭',
+    open: '开',
+    close: '关',
+    custom: '自定义',
+    desc: '商品描述',
+    delete: '删除',
+    select: '选择',
+    collect: '收藏',
+    group: '使用 SwipeGroup 控制 Swipe 之间互斥'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    leftDel: 'Swipe left to delete',
+    disable: 'Disable swipe',
+    swipeLR: 'Swipe left and right',
+    swipeLRDesc: 'You can swipe left and right',
+    async: 'Async control swipe',
+    asyncDesc: 'Async on and off',
+    open: 'on',
+    close: 'off',
+    custom: 'Custom',
+    desc: 'product description',
+    delete: 'Delelte',
+    select: 'Select',
+    collect: 'Collect',
+    group: 'Use SwipeGroup to make swipe exclusive'
+  }
+});
 const refSwipe = ref<any>();
 const checked = ref(false);
 const number = ref(0);
diff --git a/src/packages/__VUE/swiper/demo.vue b/src/packages/__VUE/swiper/demo.vue
index 3217e61ccd..3aaabf1360 100644
--- a/src/packages/__VUE/swiper/demo.vue
+++ b/src/packages/__VUE/swiper/demo.vue
@@ -89,38 +89,34 @@
 
 <script setup lang="ts">
 import { reactive, onMounted, ref, Ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('swiper');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Left, Right } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      asyc: '异步加载(3s)',
-      dynamicDel: '动态加载',
-      size: '自定义大小',
-      indicator: '自定义指示器',
-      indicator1: '自定义指示器(异步3s)',
-      btns: '手动切换',
-      vertical: '垂直方向',
-      horizontalCenter: '水平居中展示',
-      verticalCenter: '垂直居中展示'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      asyc: 'Asynchronous loading(3s)',
-      dynamicDel: 'Dynamic loading',
-      size: 'Custom size',
-      indicator: 'Custom indicator',
-      indicator1: 'Custom indicator(Asynchronous loading(3s))',
-      btns: 'Manual switching',
-      vertical: 'Vertical direction',
-      horizontalCenter: 'Horizontal center display',
-      verticalCenter: 'Vertical center display'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    asyc: '异步加载(3s)',
+    dynamicDel: '动态加载',
+    size: '自定义大小',
+    indicator: '自定义指示器',
+    indicator1: '自定义指示器(异步3s)',
+    btns: '手动切换',
+    vertical: '垂直方向',
+    horizontalCenter: '水平居中展示',
+    verticalCenter: '垂直居中展示'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    asyc: 'Asynchronous loading(3s)',
+    dynamicDel: 'Dynamic loading',
+    size: 'Custom size',
+    indicator: 'Custom indicator',
+    indicator1: 'Custom indicator(Asynchronous loading(3s))',
+    btns: 'Manual switching',
+    vertical: 'Vertical direction',
+    horizontalCenter: 'Horizontal center display',
+    verticalCenter: 'Vertical center display'
+  }
+});
 const swiper = ref(null) as Ref;
 const state = reactive({
   page: 2,
diff --git a/src/packages/__VUE/switch/demo.vue b/src/packages/__VUE/switch/demo.vue
index 3ce531f6a6..f1466885f3 100644
--- a/src/packages/__VUE/switch/demo.vue
+++ b/src/packages/__VUE/switch/demo.vue
@@ -64,41 +64,37 @@
 import { ref, reactive } from 'vue';
 import NutSwitch from './index.vue';
 import NutCell from '../cell/index.vue';
-import { createComponent } from '@/packages/utils/create';
 import { Loading } from '@nutui/icons-vue';
 import { showToast } from '@/packages/nutui.vue';
-const { translate } = createComponent('switch');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title1: '值为字符串',
-      title2: '禁用状态',
-      title3: '加载状态',
-      title4: 'change 事件',
-      title5: '异步控制',
-      title6: '自定义颜色',
-      title7: '支持文字',
-      title8: '自定义加载图标',
-      text1: '开',
-      text2: '关'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title1: 'Value Is String',
-      title2: 'Disabled',
-      title3: 'Loading',
-      title4: 'Change Event',
-      title5: 'Async Control',
-      title6: 'Custom Color',
-      title7: 'Support Text',
-      title8: 'Custom loading icon',
-      text1: 'Open',
-      text2: 'Closed'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '值为字符串',
+    title2: '禁用状态',
+    title3: '加载状态',
+    title4: 'change 事件',
+    title5: '异步控制',
+    title6: '自定义颜色',
+    title7: '支持文字',
+    title8: '自定义加载图标',
+    text1: '开',
+    text2: '关'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Value Is String',
+    title2: 'Disabled',
+    title3: 'Loading',
+    title4: 'Change Event',
+    title5: 'Async Control',
+    title6: 'Custom Color',
+    title7: 'Support Text',
+    title8: 'Custom loading icon',
+    text1: 'Open',
+    text2: 'Closed'
+  }
+});
 const data = reactive({
   checked1: true,
   checked2: true,
diff --git a/src/packages/__VUE/tabbar/demo.vue b/src/packages/__VUE/tabbar/demo.vue
index 25e7a09a5f..82ddd605fb 100644
--- a/src/packages/__VUE/tabbar/demo.vue
+++ b/src/packages/__VUE/tabbar/demo.vue
@@ -122,36 +122,32 @@
 import { h, ref } from 'vue';
 import NutTabbar from './index.vue';
 import NutTabbarItem from '../tabbaritem/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('tabbar');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      byName: '通过名称匹配',
-      customIcon: '自定义图标',
-      customCheck: '自定义选中',
-      showBadge: '徽标提示',
-      customColor: '自定义颜色',
-      customQuantity: '自定义数量',
-      fixedBottom: '固定底部',
-      title: '标签'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      byName: 'Match by name',
-      customIcon: 'Custom Icon',
-      customCheck: 'Custom Check',
-      showBadge: 'Show Badge',
-      customColor: 'Custom Color',
-      customQuantity: 'Custom Quantity',
-      fixedBottom: 'Fixed Bottom',
-      title: 'tab'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    byName: '通过名称匹配',
+    customIcon: '自定义图标',
+    customCheck: '自定义选中',
+    showBadge: '徽标提示',
+    customColor: '自定义颜色',
+    customQuantity: '自定义数量',
+    fixedBottom: '固定底部',
+    title: '标签'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    byName: 'Match by name',
+    customIcon: 'Custom Icon',
+    customCheck: 'Custom Check',
+    showBadge: 'Show Badge',
+    customColor: 'Custom Color',
+    customQuantity: 'Custom Quantity',
+    fixedBottom: 'Fixed Bottom',
+    title: 'tab'
+  }
+});
 const active = ref(2);
 const activeName = ref('category');
 function tabSwitch(item: Record<string, unknown>, index: number) {
diff --git a/src/packages/__VUE/table/demo.vue b/src/packages/__VUE/table/demo.vue
index 3b0e6ff93e..b31366d4c8 100644
--- a/src/packages/__VUE/table/demo.vue
+++ b/src/packages/__VUE/table/demo.vue
@@ -27,71 +27,67 @@
 
 <script setup lang="ts">
 import { reactive, onMounted, onUnmounted, h } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { TableColumns } from './types';
 import { showToast } from '@/packages/nutui.vue';
 import Button from '@/packages/__VUE/button/index.vue';
 import { Dongdong } from '@nutui/icons-vue';
-const { translate } = createComponent('table');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title1: '是否显示边框，文字对齐',
-      title2: '显示总结栏',
-      title3: '条纹、明暗交替',
-      title4: '无数据默认展示，支持自定义',
-      title5: '这里是自定义展示',
-      title6: '自定义单元格',
-      title7: '支持异步渲染(5s之后看效果)',
-      title8: '支持排序',
-      name: '姓名',
-      age: '年龄',
-      sex: '性别',
-      man: '男',
-      woman: '女',
-      education: '学历',
-      address: '地址',
-      oper: '操作',
-      primary: '小学',
-      high: '高中',
-      undergraduate: '本科',
-      jump: '跳转到京东',
-      summary: '这是总结栏',
-      beijing: '北京',
-      shanghai: '上海',
-      hangzhou: '杭州'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title1: 'Whether to display border and align text',
-      title2: 'Show summary bar',
-      title3: 'Stripes, alternating light and shade',
-      title4: 'No data is displayed by default, and customization is supported',
-      title5: 'Here is the custom display',
-      title6: 'Custom cell',
-      title7: 'Support asynchronous rendering(See the effect after 5S)',
-      title8: 'Support sorting',
-      name: 'name',
-      age: 'age',
-      sex: 'sex',
-      man: 'man',
-      woman: 'woman',
-      education: 'education',
-      address: 'address',
-      oper: 'operation',
-      primary: 'primary school',
-      high: 'high school',
-      undergraduate: 'undergraduate',
-      jump: 'Jump To Jingdong',
-      summary: 'This is the summary column',
-      beijing: 'beijing',
-      shanghai: 'shanghai',
-      hangzhou: 'hangzhou'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '是否显示边框，文字对齐',
+    title2: '显示总结栏',
+    title3: '条纹、明暗交替',
+    title4: '无数据默认展示，支持自定义',
+    title5: '这里是自定义展示',
+    title6: '自定义单元格',
+    title7: '支持异步渲染(5s之后看效果)',
+    title8: '支持排序',
+    name: '姓名',
+    age: '年龄',
+    sex: '性别',
+    man: '男',
+    woman: '女',
+    education: '学历',
+    address: '地址',
+    oper: '操作',
+    primary: '小学',
+    high: '高中',
+    undergraduate: '本科',
+    jump: '跳转到京东',
+    summary: '这是总结栏',
+    beijing: '北京',
+    shanghai: '上海',
+    hangzhou: '杭州'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Whether to display border and align text',
+    title2: 'Show summary bar',
+    title3: 'Stripes, alternating light and shade',
+    title4: 'No data is displayed by default, and customization is supported',
+    title5: 'Here is the custom display',
+    title6: 'Custom cell',
+    title7: 'Support asynchronous rendering(See the effect after 5S)',
+    title8: 'Support sorting',
+    name: 'name',
+    age: 'age',
+    sex: 'sex',
+    man: 'man',
+    woman: 'woman',
+    education: 'education',
+    address: 'address',
+    oper: 'operation',
+    primary: 'primary school',
+    high: 'high school',
+    undergraduate: 'undergraduate',
+    jump: 'Jump To Jingdong',
+    summary: 'This is the summary column',
+    beijing: 'beijing',
+    shanghai: 'shanghai',
+    hangzhou: 'hangzhou'
+  }
+});
 const state = reactive({
   bordered1: false,
   striped: true,
diff --git a/src/packages/__VUE/tabs/demo.vue b/src/packages/__VUE/tabs/demo.vue
index 6e16b36073..f56f5fad25 100644
--- a/src/packages/__VUE/tabs/demo.vue
+++ b/src/packages/__VUE/tabs/demo.vue
@@ -96,42 +96,38 @@
 import { reactive, computed } from 'vue';
 import NutTabs from './index.vue';
 import NutTabPane from '../tabpane/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('tabs');
 import { Dongdong } from '@nutui/icons-vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      swipeable: '手势滑动切换',
-      title1: '基础用法-微笑曲线',
-      title3: '数据异步渲染 3s',
-      title4: '数量多，滚动操作（横向）',
-      title5: '左右布局',
-      title6: '左右布局-微笑曲线',
-      title7: '标签栏字体尺寸 large normal small',
-      title8: '自定义标签栏',
-      title9: 'TabPane 自动高度',
-      title10: '数量多，滚动操作（纵向）',
-      custom: () => `自定义 ${1}`
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      swipeable: 'Swipeable',
-      title1: 'Basic Usage - Smile Curve',
-      title3: 'Data is rendered asynchronously for 3s',
-      title4: 'A large number of scrolling operations(horizontal)',
-      title5: 'Left and right layout',
-      title6: 'Left and Right Layout - Smile Curve',
-      title7: 'tab bar font size large normal small',
-      title8: 'custom tab bar',
-      title9: 'TabPane auto height',
-      title10: 'A large number of scrolling operations(vertical)',
-      custom: () => `custom ${1}`
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    swipeable: '手势滑动切换',
+    title1: '基础用法-微笑曲线',
+    title3: '数据异步渲染 3s',
+    title4: '数量多，滚动操作（横向）',
+    title5: '左右布局',
+    title6: '左右布局-微笑曲线',
+    title7: '标签栏字体尺寸 large normal small',
+    title8: '自定义标签栏',
+    title9: 'TabPane 自动高度',
+    title10: '数量多，滚动操作（纵向）',
+    custom: () => `自定义 ${1}`
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    swipeable: 'Swipeable',
+    title1: 'Basic Usage - Smile Curve',
+    title3: 'Data is rendered asynchronously for 3s',
+    title4: 'A large number of scrolling operations(horizontal)',
+    title5: 'Left and right layout',
+    title6: 'Left and Right Layout - Smile Curve',
+    title7: 'tab bar font size large normal small',
+    title8: 'custom tab bar',
+    title9: 'TabPane auto height',
+    title10: 'A large number of scrolling operations(vertical)',
+    custom: () => `custom ${1}`
+  }
+});
 const state = reactive({
   tab1value: '0',
   tab11value: '0',
diff --git a/src/packages/__VUE/tag/demo.vue b/src/packages/__VUE/tag/demo.vue
index e5e1764d95..ab0aa08fe5 100644
--- a/src/packages/__VUE/tag/demo.vue
+++ b/src/packages/__VUE/tag/demo.vue
@@ -73,50 +73,46 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('tag');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      title: '基础用法',
-      title1: '样式风格',
-      title2: '颜色自定义',
-      type0: 'defualt 类型',
-      type1: 'primary 类型',
-      type2: 'success 类型',
-      type3: 'danger 类型',
-      type4: 'warning 类型',
-      plain: '空心样式',
-      round: '圆角样式',
-      mark: '标记样式',
-      closeable: '可关闭标签',
-      tag: '标签',
-      bgColor: '背景颜色',
-      textColor: '文字颜色',
-      plaincolor: '空心颜色'
-    },
-    'en-US': {
-      title: 'Basic Usage',
-      title1: 'Style',
-      title2: 'Custom Color',
-      type0: 'default',
-      type1: 'primary',
-      type2: 'success',
-      type3: 'danger',
-      type4: 'warning',
-      plain: 'plain',
-      round: 'round',
-      mark: 'mark',
-      closeable: 'closeable',
-      tag: 'Tag',
-      bgColor: 'background color',
-      textColor: 'text color',
-      plaincolor: 'plain color'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    title: '基础用法',
+    title1: '样式风格',
+    title2: '颜色自定义',
+    type0: 'defualt 类型',
+    type1: 'primary 类型',
+    type2: 'success 类型',
+    type3: 'danger 类型',
+    type4: 'warning 类型',
+    plain: '空心样式',
+    round: '圆角样式',
+    mark: '标记样式',
+    closeable: '可关闭标签',
+    tag: '标签',
+    bgColor: '背景颜色',
+    textColor: '文字颜色',
+    plaincolor: '空心颜色'
+  },
+  'en-US': {
+    title: 'Basic Usage',
+    title1: 'Style',
+    title2: 'Custom Color',
+    type0: 'default',
+    type1: 'primary',
+    type2: 'success',
+    type3: 'danger',
+    type4: 'warning',
+    plain: 'plain',
+    round: 'round',
+    mark: 'mark',
+    closeable: 'closeable',
+    tag: 'Tag',
+    bgColor: 'background color',
+    textColor: 'text color',
+    plaincolor: 'plain color'
+  }
+});
 const show = ref(true);
 const close = () => {
   show.value = false;
diff --git a/src/packages/__VUE/textarea/demo.vue b/src/packages/__VUE/textarea/demo.vue
index b3f7317a50..6310511294 100644
--- a/src/packages/__VUE/textarea/demo.vue
+++ b/src/packages/__VUE/textarea/demo.vue
@@ -17,33 +17,29 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('textarea');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title: '显示字数统计',
-      title1: '高度自定义，拉伸',
-      title2: '只读',
-      title3: '禁用',
-      title4: '自动获取焦点',
-      desc1: 'textarea只读状态',
-      desc2: 'textarea禁用状态'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title: 'Display word count',
-      title1: 'Height customization, stretching',
-      title2: 'read-only',
-      title3: 'Disable',
-      title4: 'Get focus automatically',
-      desc1: 'Textarea read only status',
-      desc2: 'Textarea disabled'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title: '显示字数统计',
+    title1: '高度自定义，拉伸',
+    title2: '只读',
+    title3: '禁用',
+    title4: '自动获取焦点',
+    desc1: 'textarea只读状态',
+    desc2: 'textarea禁用状态'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title: 'Display word count',
+    title1: 'Height customization, stretching',
+    title2: 'read-only',
+    title3: 'Disable',
+    title4: 'Get focus automatically',
+    desc1: 'Textarea read only status',
+    desc2: 'Textarea disabled'
+  }
+});
 const value = ref('');
 const value2 = ref('');
 const value3 = ref('');
diff --git a/src/packages/__VUE/timeselect/demo.vue b/src/packages/__VUE/timeselect/demo.vue
index 062fef3e80..dba95d17fd 100644
--- a/src/packages/__VUE/timeselect/demo.vue
+++ b/src/packages/__VUE/timeselect/demo.vue
@@ -74,11 +74,9 @@
 
 <script setup lang="ts">
 import { reactive, onMounted } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { showToast } from '@/packages/nutui.vue';
-const { translate } = createComponent('time-select');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-useTranslate({
+const translate = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     deliveryTime: '请选择配送时间',
diff --git a/src/packages/__VUE/toast/demo.vue b/src/packages/__VUE/toast/demo.vue
index 1cd6ecf3b5..f60f5fb1af 100644
--- a/src/packages/__VUE/toast/demo.vue
+++ b/src/packages/__VUE/toast/demo.vue
@@ -24,37 +24,33 @@
 import { onUnmounted } from 'vue';
 import { showToast } from './index';
 import NutCell from '../cell/index.vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('toast');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      toastText: '文字提示',
-      toastTitle: '标题展示',
-      toastSuccess: '成功提示',
-      toastError: '错误提示',
-      toastWarning: '警告提示',
-      toastLoading: '加载提示',
-      toastAll: 'Toast 不消失',
-      toastBottom: '自定义底部高度',
-      toastTransparent: '加载状态透明遮罩'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      toastText: 'Text Message',
-      toastTitle: 'Title',
-      toastSuccess: 'Success',
-      toastError: 'Error',
-      toastWarning: 'Warning',
-      toastLoading: 'Loading',
-      toastAll: 'Not Disappear',
-      toastBottom: 'Custom Bottom Height',
-      toastTransparent: 'Loading Transparent Cover'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    toastText: '文字提示',
+    toastTitle: '标题展示',
+    toastSuccess: '成功提示',
+    toastError: '错误提示',
+    toastWarning: '警告提示',
+    toastLoading: '加载提示',
+    toastAll: 'Toast 不消失',
+    toastBottom: '自定义底部高度',
+    toastTransparent: '加载状态透明遮罩'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    toastText: 'Text Message',
+    toastTitle: 'Title',
+    toastSuccess: 'Success',
+    toastError: 'Error',
+    toastWarning: 'Warning',
+    toastLoading: 'Loading',
+    toastAll: 'Not Disappear',
+    toastBottom: 'Custom Bottom Height',
+    toastTransparent: 'Loading Transparent Cover'
+  }
+});
 const textToast = (msg: string) => {
   showToast.text(msg);
 };
diff --git a/src/packages/__VUE/tour/demo.vue b/src/packages/__VUE/tour/demo.vue
index e8861aff51..98696914ea 100644
--- a/src/packages/__VUE/tour/demo.vue
+++ b/src/packages/__VUE/tour/demo.vue
@@ -116,31 +116,27 @@
 </template>
 <script setup lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('tour');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { StepOptions } from './index.vue';
 
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      title: '基础用法',
-      title1: '自定义样式',
-      title2: '设置偏移量',
-      title3: '自定义内容',
-      title4: '步骤引导',
-      tryClick: '点击试试'
-    },
-    'en-US': {
-      title: 'Basic Usage',
-      title1: 'Custom Style',
-      title2: 'Custom Offset',
-      title3: 'Custom Content',
-      title4: 'Steps',
-      tryClick: 'Try Click'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    title: '基础用法',
+    title1: '自定义样式',
+    title2: '设置偏移量',
+    title3: '自定义内容',
+    title4: '步骤引导',
+    tryClick: '点击试试'
+  },
+  'en-US': {
+    title: 'Basic Usage',
+    title1: 'Custom Style',
+    title2: 'Custom Offset',
+    title3: 'Custom Content',
+    title4: 'Steps',
+    tryClick: 'Try Click'
+  }
+});
 
 const state = reactive({
   switchValue: false,
diff --git a/src/packages/__VUE/trendarrow/demo.vue b/src/packages/__VUE/trendarrow/demo.vue
index f777120e78..b931fbc9e5 100644
--- a/src/packages/__VUE/trendarrow/demo.vue
+++ b/src/packages/__VUE/trendarrow/demo.vue
@@ -58,34 +58,30 @@
   </div>
 </template>
 <script setup lang="ts">
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('trend-arrow');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Success, Failure } from '@nutui/icons-vue';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title1: '改变文字颜色',
-      title2: '指定小数位',
-      title3: '箭头在前面',
-      title4: '显示正负号',
-      title5: '是否展示0',
-      title6: '自定义颜色',
-      title7: '自定义图标'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title1: 'Change text color',
-      title2: 'Specify decimal places',
-      title3: 'Arrow ahead',
-      title4: 'show sign',
-      title5: 'Whether to show 0',
-      title6: 'Custom color',
-      title7: 'Custom icon'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '改变文字颜色',
+    title2: '指定小数位',
+    title3: '箭头在前面',
+    title4: '显示正负号',
+    title5: '是否展示0',
+    title6: '自定义颜色',
+    title7: '自定义图标'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Change text color',
+    title2: 'Specify decimal places',
+    title3: 'Arrow ahead',
+    title4: 'show sign',
+    title5: 'Whether to show 0',
+    title6: 'Custom color',
+    title7: 'Custom icon'
+  }
+});
 </script>
 <style lang="scss" scoped>
 .demo {
diff --git a/src/packages/__VUE/uploader/demo.vue b/src/packages/__VUE/uploader/demo.vue
index 6a6a62ded7..a47f936741 100644
--- a/src/packages/__VUE/uploader/demo.vue
+++ b/src/packages/__VUE/uploader/demo.vue
@@ -48,50 +48,46 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('uploader');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { showToast } from '../toast/index';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      uploadfile: '上传文件',
-      title1: '上传状态',
-      title2: '基础用法-上传列表展示',
-      title3: '自定义上传样式',
-      title4: '自定义上传配合使用默认进度条',
-      title5: '直接调起摄像头（移动端生效）',
-      title6: '限制上传数量5个',
-      title7: '限制上传大小（每个文件最大不超过 50kb）',
-      title8: '图片压缩（在 beforeupload 钩子中处理）',
-      title9: '自定义数据 FormData 、 headers ',
-      title10: '选中文件后，通过按钮手动执行上传',
-      title11: '手动执行上传',
-      title12: '禁用状态',
-      title13: '自定义 xhr 上传方式(before-xhr-upload)',
-      title14: '手动清空上传'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      uploadfile: 'Upload files',
-      title1: 'Upload status',
-      title2: 'Basic usage - upload list display',
-      title3: 'Custom upload style',
-      title4: 'Custom upload uses default progress bar',
-      title5: 'Directly activate the camera (effective on the mobile terminal)',
-      title6: 'Limit the number of uploads to 5',
-      title7: 'Limit upload size (up to 50kb per file)',
-      title8: 'Image compression (handled in the beforeupload hook)',
-      title9: 'Custom data FormData , headers',
-      title10: 'Once the file is selected, manually perform the upload via the button',
-      title11: 'Manual upload',
-      title12: 'Disabled state',
-      title13: 'Customize XHR upload (before-xhr-upload)',
-      title14: 'Clear upload manually'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    uploadfile: '上传文件',
+    title1: '上传状态',
+    title2: '基础用法-上传列表展示',
+    title3: '自定义上传样式',
+    title4: '自定义上传配合使用默认进度条',
+    title5: '直接调起摄像头（移动端生效）',
+    title6: '限制上传数量5个',
+    title7: '限制上传大小（每个文件最大不超过 50kb）',
+    title8: '图片压缩（在 beforeupload 钩子中处理）',
+    title9: '自定义数据 FormData 、 headers ',
+    title10: '选中文件后，通过按钮手动执行上传',
+    title11: '手动执行上传',
+    title12: '禁用状态',
+    title13: '自定义 xhr 上传方式(before-xhr-upload)',
+    title14: '手动清空上传'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    uploadfile: 'Upload files',
+    title1: 'Upload status',
+    title2: 'Basic usage - upload list display',
+    title3: 'Custom upload style',
+    title4: 'Custom upload uses default progress bar',
+    title5: 'Directly activate the camera (effective on the mobile terminal)',
+    title6: 'Limit the number of uploads to 5',
+    title7: 'Limit upload size (up to 50kb per file)',
+    title8: 'Image compression (handled in the beforeupload hook)',
+    title9: 'Custom data FormData , headers',
+    title10: 'Once the file is selected, manually perform the upload via the button',
+    title11: 'Manual upload',
+    title12: 'Disabled state',
+    title13: 'Customize XHR upload (before-xhr-upload)',
+    title14: 'Clear upload manually'
+  }
+});
 const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts';
 const progressPercentage = ref<string | number>(0);
 const formData = {
diff --git a/src/packages/__VUE/video/demo.vue b/src/packages/__VUE/video/demo.vue
index 52bea67de0..14524431fa 100644
--- a/src/packages/__VUE/video/demo.vue
+++ b/src/packages/__VUE/video/demo.vue
@@ -58,44 +58,39 @@
 
 <script setup lang="ts">
 import { reactive, ref, Ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('video');
-
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title1: '自动播放',
-      title2: '初始化静音',
-      title3: '视频封面海报设置',
-      title4: '行内播放',
-      title5: '设置视频为背景图',
-      title6: '视频切换',
-      title7: 'Ref控制播放，暂停，结束，静音，取消静音',
-      title8: '播放',
-      title9: '暂停',
-      title10: '结束',
-      title11: '静音',
-      title12: '取消静音'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title1: 'Auto play',
-      title2: 'Initialize mute',
-      title3: 'Video cover poster settings',
-      title4: 'play inline',
-      title5: 'Set video as background',
-      title6: 'Video switching',
-      title7: 'Ref Control play, pause, stop, muted, unmuted',
-      title8: 'play',
-      title9: 'pause',
-      title10: 'stop',
-      title11: 'muted',
-      title12: 'unmuted'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title1: '自动播放',
+    title2: '初始化静音',
+    title3: '视频封面海报设置',
+    title4: '行内播放',
+    title5: '设置视频为背景图',
+    title6: '视频切换',
+    title7: 'Ref控制播放，暂停，结束，静音，取消静音',
+    title8: '播放',
+    title9: '暂停',
+    title10: '结束',
+    title11: '静音',
+    title12: '取消静音'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Auto play',
+    title2: 'Initialize mute',
+    title3: 'Video cover poster settings',
+    title4: 'play inline',
+    title5: 'Set video as background',
+    title6: 'Video switching',
+    title7: 'Ref Control play, pause, stop, muted, unmuted',
+    title8: 'play',
+    title9: 'pause',
+    title10: 'stop',
+    title11: 'muted',
+    title12: 'unmuted'
+  }
+});
 const state = reactive({
   source: {
     src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
diff --git a/src/packages/__VUE/watermark/demo.vue b/src/packages/__VUE/watermark/demo.vue
index 8e7e40a2ed..e8706f5ddf 100644
--- a/src/packages/__VUE/watermark/demo.vue
+++ b/src/packages/__VUE/watermark/demo.vue
@@ -23,25 +23,21 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('watermark');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-const initTranslate = () =>
-  useTranslate({
-    'zh-CN': {
-      basic: '基础用法',
-      title2: '局部用法',
-      btn1: '文字水印',
-      btn2: '图片水印'
-    },
-    'en-US': {
-      basic: 'Basic Usage',
-      title2: 'Part Usage',
-      btn1: 'Text Watermark',
-      btn2: 'Image Watermark'
-    }
-  });
-initTranslate();
+const translate = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    title2: '局部用法',
+    btn1: '文字水印',
+    btn2: '图片水印'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title2: 'Part Usage',
+    btn1: 'Text Watermark',
+    btn2: 'Image Watermark'
+  }
+});
 const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
 const imgSrc = ref('//img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png');
 const flag = ref(false);
diff --git a/src/packages/utils/create/component.ts b/src/packages/utils/create/component.ts
index ea49320d8b..ac9d1b6125 100644
--- a/src/packages/utils/create/component.ts
+++ b/src/packages/utils/create/component.ts
@@ -1,18 +1,10 @@
 import { App, defineComponent, ComponentOptions } from 'vue';
-import locale from '@/packages/locale';
-import { getPropByPath, isFunction } from '../util';
 
 export function createComponent(name: string) {
   // TODO: It will be deprecated someday.
   const componentName = 'nut-' + name;
   return {
     componentName,
-    translate(keyPath: string, ...args: unknown[]): string {
-      // 依赖响应能力
-      const languages = locale.languages();
-      const text = getPropByPath(languages, `${name.replace('-', '')}.${keyPath}`) || getPropByPath(languages, keyPath);
-      return isFunction(text) ? text(...args) : text;
-    },
     create: function (_component: ComponentOptions) {
       _component.name = componentName;
       _component.install = (vue: App) => {