diff --git a/packages/ui-vue2/src/Component.vue b/packages/ui-vue2/src/Component.vue
index 1e17256b..52143e6a 100644
--- a/packages/ui-vue2/src/Component.vue
+++ b/packages/ui-vue2/src/Component.vue
@@ -17,8 +17,6 @@ import { MComponent } from '@tmagic/schema';
 import { toLine } from '@tmagic/utils';
 
 export default defineComponent({
-  name: 'magic-ui-component',
-
   props: {
     config: {
       type: Object as PropType<MComponent>,
diff --git a/packages/ui-vue2/src/button/Button.vue b/packages/ui-vue2/src/button/Button.vue
index f8d7f5b5..ecce2c4a 100644
--- a/packages/ui-vue2/src/button/Button.vue
+++ b/packages/ui-vue2/src/button/Button.vue
@@ -13,7 +13,6 @@ import type { MComponent } from '@tmagic/schema';
 import useApp from '../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-button',
   props: {
     config: {
       type: Object as PropType<MComponent>,
diff --git a/packages/ui-vue2/src/container/Container.vue b/packages/ui-vue2/src/container/Container.vue
index 14c8eab7..e11cf880 100644
--- a/packages/ui-vue2/src/container/Container.vue
+++ b/packages/ui-vue2/src/container/Container.vue
@@ -20,8 +20,6 @@ import useApp from '../useApp';
 import useCommonMethod from '../useCommonMethod';
 
 export default defineComponent({
-  name: 'magic-ui-container',
-
   components: {
     'magic-ui-component': Component,
   },
diff --git a/packages/ui-vue2/src/img/src/index.vue b/packages/ui-vue2/src/img/src/index.vue
index 602341c5..0d2615b6 100644
--- a/packages/ui-vue2/src/img/src/index.vue
+++ b/packages/ui-vue2/src/img/src/index.vue
@@ -7,7 +7,6 @@ import { defineComponent } from 'vue';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-img',
   props: {
     config: {
       type: Object,
diff --git a/packages/ui-vue2/src/overlay/src/index.vue b/packages/ui-vue2/src/overlay/src/index.vue
index a6214d6a..644497b2 100644
--- a/packages/ui-vue2/src/overlay/src/index.vue
+++ b/packages/ui-vue2/src/overlay/src/index.vue
@@ -12,7 +12,6 @@ import type { MNode } from '@tmagic/schema';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-overlay',
   props: {
     config: {
       type: Object,
diff --git a/packages/ui-vue2/src/page/Page.vue b/packages/ui-vue2/src/page/Page.vue
index 2a741380..4896db85 100644
--- a/packages/ui-vue2/src/page/Page.vue
+++ b/packages/ui-vue2/src/page/Page.vue
@@ -18,8 +18,6 @@ import Component from '../Component.vue';
 import useApp from '../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-page',
-
   components: {
     'magic-ui-component': Component,
   },
diff --git a/packages/ui-vue2/src/qrcode/src/index.vue b/packages/ui-vue2/src/qrcode/src/index.vue
index b24f7d0f..b27bb108 100644
--- a/packages/ui-vue2/src/qrcode/src/index.vue
+++ b/packages/ui-vue2/src/qrcode/src/index.vue
@@ -9,8 +9,6 @@ import QRCode from 'qrcode';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-qrcode',
-
   props: {
     config: {
       type: Object,
diff --git a/packages/ui-vue2/src/text/Text.vue b/packages/ui-vue2/src/text/Text.vue
index 825f5cd7..7d5cb97f 100644
--- a/packages/ui-vue2/src/text/Text.vue
+++ b/packages/ui-vue2/src/text/Text.vue
@@ -6,8 +6,6 @@ import type { MComponent } from '@tmagic/schema';
 import useApp from '../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-text',
-
   props: {
     config: {
       type: Object as PropType<MComponent>,
diff --git a/packages/ui/src/Component.vue b/packages/ui/src/Component.vue
index c3450f56..b1d1804f 100644
--- a/packages/ui/src/Component.vue
+++ b/packages/ui/src/Component.vue
@@ -16,8 +16,6 @@ import Core from '@tmagic/core';
 import { toLine } from '@tmagic/utils';
 
 export default defineComponent({
-  name: 'magic-ui-component',
-
   props: {
     config: {
       type: Object,
diff --git a/packages/ui/src/button/src/index.vue b/packages/ui/src/button/src/index.vue
index 411ec2f8..053c2c6b 100644
--- a/packages/ui/src/button/src/index.vue
+++ b/packages/ui/src/button/src/index.vue
@@ -12,7 +12,6 @@ import { MButton, MButtonInstance, MText } from '../../../src/types';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-button',
   props: {
     config: {
       type: Object as PropType<MButton>,
diff --git a/packages/ui/src/container/src/Container.vue b/packages/ui/src/container/src/Container.vue
index 55b0a1e9..ad8d4f82 100644
--- a/packages/ui/src/container/src/Container.vue
+++ b/packages/ui/src/container/src/Container.vue
@@ -20,8 +20,6 @@ import useApp from '../../useApp';
 import useCommonMethod from '../../useCommonMethod';
 
 export default defineComponent({
-  name: 'magic-ui-container',
-
   components: {
     'magic-ui-component': Component,
   },
diff --git a/packages/ui/src/img/src/index.vue b/packages/ui/src/img/src/index.vue
index d143f08f..92a3c5d9 100644
--- a/packages/ui/src/img/src/index.vue
+++ b/packages/ui/src/img/src/index.vue
@@ -8,7 +8,6 @@ import { MImg } from '../../types';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-img',
   props: {
     config: {
       type: Object as PropType<MImg>,
diff --git a/packages/ui/src/overlay/src/index.vue b/packages/ui/src/overlay/src/index.vue
index a6214d6a..644497b2 100644
--- a/packages/ui/src/overlay/src/index.vue
+++ b/packages/ui/src/overlay/src/index.vue
@@ -12,7 +12,6 @@ import type { MNode } from '@tmagic/schema';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-overlay',
   props: {
     config: {
       type: Object,
diff --git a/packages/ui/src/page/src/index.vue b/packages/ui/src/page/src/index.vue
index fdd8dcf1..9a241a5b 100644
--- a/packages/ui/src/page/src/index.vue
+++ b/packages/ui/src/page/src/index.vue
@@ -18,8 +18,6 @@ import Component from '../../Component.vue';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-page',
-
   components: {
     'magic-ui-component': Component,
   },
diff --git a/packages/ui/src/qrcode/src/index.vue b/packages/ui/src/qrcode/src/index.vue
index 8e47c5b0..b2f4bed2 100644
--- a/packages/ui/src/qrcode/src/index.vue
+++ b/packages/ui/src/qrcode/src/index.vue
@@ -10,8 +10,6 @@ import { MQrcode } from '../../types';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-qrcode',
-
   props: {
     config: {
       type: Object as PropType<MQrcode>,
diff --git a/packages/ui/src/text/src/index.vue b/packages/ui/src/text/src/index.vue
index f90c879e..694a477d 100644
--- a/packages/ui/src/text/src/index.vue
+++ b/packages/ui/src/text/src/index.vue
@@ -5,7 +5,6 @@ import { MComponentInstance, MText, MTextInstance } from '../../../src/types';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-text',
   props: {
     config: {
       type: Object as PropType<MText>,
diff --git a/runtime/vue2/page/main.ts b/runtime/vue2/page/main.ts
index ebdf0fd5..72082888 100644
--- a/runtime/vue2/page/main.ts
+++ b/runtime/vue2/page/main.ts
@@ -37,7 +37,7 @@ const app = new Core({
 
 Object.keys(components).forEach((type: string) => {
   const component = components[type];
-  Vue.component(component.name, component);
+  Vue.component(`magic-ui-${type}`, component);
   app.registerComponent(type, component);
 });
 
diff --git a/runtime/vue2/playground/main.ts b/runtime/vue2/playground/main.ts
index c593c550..21993699 100644
--- a/runtime/vue2/playground/main.ts
+++ b/runtime/vue2/playground/main.ts
@@ -21,8 +21,8 @@ import Vue from 'vue';
 import App from './App.vue';
 
 Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]).then(([components, plugins]) => {
-  Object.values(components.default).forEach((component: any) => {
-    Vue.component(component.name, component);
+  Object.entries(components.default).forEach(([type, component]: [string, any]) => {
+    Vue.component(`magic-ui-${type}`, component);
   });
 
   Object.values(plugins.default).forEach((plugin: any) => {
diff --git a/runtime/vue3/page/main.ts b/runtime/vue3/page/main.ts
index 1e2e8231..11d7ac47 100644
--- a/runtime/vue3/page/main.ts
+++ b/runtime/vue3/page/main.ts
@@ -32,8 +32,8 @@ const magicApp = createApp(AppComponent);
 
 magicApp.use(request);
 
-Object.values(components).forEach((component: any) => {
-  magicApp.component(component.name, component);
+Object.entries(components).forEach(([type, component]: [string, any]) => {
+  magicApp.component(`magic-ui-${type}`, component);
 });
 
 Object.values(plugins).forEach((plugin: any) => {
diff --git a/runtime/vue3/playground/main.ts b/runtime/vue3/playground/main.ts
index cb02ab12..79160491 100644
--- a/runtime/vue3/playground/main.ts
+++ b/runtime/vue3/playground/main.ts
@@ -23,8 +23,8 @@ import App from './App.vue';
 Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]).then(([components, plugins]) => {
   const magicApp = createApp(App);
 
-  Object.values(components.default).forEach((component: any) => {
-    magicApp.component(component.name, component);
+  Object.entries(components.default).forEach(([type, component]: [string, any]) => {
+    magicApp.component(`magic-ui-${type}`, component);
   });
 
   Object.values(plugins.default).forEach((plugin: any) => {