diff --git a/resources/assets/js/components/MicroApps/content.vue b/resources/assets/js/components/MicroApps/content.vue
new file mode 100644
index 000000000..00550e0c8
--- /dev/null
+++ b/resources/assets/js/components/MicroApps/content.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="micro-app-content">
+        <micro-app
+            v-if="isOpen"
+            :name="appName"
+            :url="appUrl"
+            :keep-alive="keepAlive"
+            :data="appData"
+            @created="$emit('created', $event)"
+            @beforemount="$emit('beforemount', $event)"
+            @mounted="$emit('mounted', $event)"
+            @unmount="$emit('unmount', $event)"
+            @error="$emit('error', $event)"/>
+        <div v-if="isLoading" class="micro-app-loader">
+            <Loading/>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "MicroContent",
+    props: {
+        isOpen: {
+            type: Boolean,
+            required: true
+        },
+        appName: {
+            type: String,
+            required: true
+        },
+        appUrl: {
+            type: String,
+            required: true
+        },
+        keepAlive: {
+            type: Boolean,
+            default: true
+        },
+        isLoading: {
+            type: Boolean,
+            default: false
+        },
+        appData: {
+            type: Object,
+            required: true
+        }
+    }
+}
+</script>
diff --git a/resources/assets/js/components/MicroApps.vue b/resources/assets/js/components/MicroApps/index.vue
similarity index 81%
rename from resources/assets/js/components/MicroApps.vue
rename to resources/assets/js/components/MicroApps/index.vue
index bbd8983bd..649cef392 100644
--- a/resources/assets/js/components/MicroApps.vue
+++ b/resources/assets/js/components/MicroApps/index.vue
@@ -10,22 +10,18 @@
                 :beforeClose="async () => { await onBeforeClose(app.appName) }"
                 class-name="micro-app-trans"
                 fullscreen>
-                <template>
-                    <micro-app
-                        v-if="app.isOpen"
-                        :name="app.appName"
-                        :url="app.appUrl"
-                        :keep-alive="app.keepAlive"
-                        :data="appData(app.appName)"
-                        @created="created"
-                        @beforemount="beforemount"
-                        @mounted="mounted"
-                        @unmount="unmount"
-                        @error="error"/>
-                    <div v-if="app.isLoading" class="micro-app-loader">
-                        <Loading/>
-                    </div>
-                </template>
+                <MicroContent
+                    :is-open="app.isOpen"
+                    :app-name="app.appName"
+                    :app-url="app.appUrl"
+                    :keep-alive="app.keepAlive"
+                    :is-loading="app.isLoading"
+                    :app-data="appData(app.appName)"
+                    @created="created"
+                    @beforemount="beforemount"
+                    @mounted="mounted"
+                    @unmount="unmount"
+                    @error="error"/>
             </Modal>
             <DrawerOverlay
                 v-else
@@ -35,22 +31,18 @@
                 placement="right"
                 :beforeClose="async () => { await onBeforeClose(app.appName) }"
                 :size="1200">
-                <template>
-                    <micro-app
-                        v-if="app.isOpen"
-                        :name="app.appName"
-                        :url="app.appUrl"
-                        :keep-alive="app.keepAlive"
-                        :data="appData(app.appName)"
-                        @created="created"
-                        @beforemount="beforemount"
-                        @mounted="mounted"
-                        @unmount="unmount"
-                        @error="error"/>
-                    <div v-if="app.isLoading" class="micro-app-loader">
-                        <Loading/>
-                    </div>
-                </template>
+                <MicroContent
+                    :is-open="app.isOpen"
+                    :app-name="app.appName"
+                    :app-url="app.appUrl"
+                    :keep-alive="app.keepAlive"
+                    :is-loading="app.isLoading"
+                    :app-data="appData(app.appName)"
+                    @created="created"
+                    @beforemount="beforemount"
+                    @mounted="mounted"
+                    @unmount="unmount"
+                    @error="error"/>
             </DrawerOverlay>
         </template>
     </div>
@@ -95,21 +87,22 @@
 
 <script>
 import Vue from 'vue'
-import store from '../store/index'
 import {mapState} from "vuex";
-import microApp from '@micro-zoe/micro-app'
-import DialogWrapper from '../pages/manage/components/DialogWrapper.vue'
-import UserSelect from "./UserSelect.vue";
-import {languageList, languageName} from "../language";
 import {DatePicker} from 'view-design-hi';
-import DrawerOverlay from "./DrawerOverlay/index.vue";
-import emitter from "../store/events";
-import TransferDom from "../directives/transfer-dom";
+import microApp from '@micro-zoe/micro-app'
+import store from '../../store/index'
+import DialogWrapper from '../../pages/manage/components/DialogWrapper.vue'
+import UserSelect from "../UserSelect.vue";
+import {languageList, languageName} from "../../language";
+import DrawerOverlay from "../DrawerOverlay/index.vue";
+import emitter from "../../store/events";
+import TransferDom from "../../directives/transfer-dom";
+import MicroContent from "./content.vue";
 
 export default {
     name: "MicroApps",
     directives: {TransferDom},
-    components: {DrawerOverlay},
+    components: {MicroContent, DrawerOverlay},
 
     data() {
         return {
diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index b9d8827fd..3e5826410 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -379,7 +379,7 @@ import CheckinExport from "./manage/components/CheckinExport";
 import TaskExport from "./manage/components/TaskExport";
 import ApproveExport from "./manage/components/ApproveExport";
 import ComplaintManagement from "./manage/components/ComplaintManagement";
-import MicroApps from "../components/MicroApps.vue";
+import MicroApps from "../components/MicroApps";
 import UserSelect from "../components/UserSelect.vue";
 import ImgUpload from "../components/ImgUpload.vue";
 import ApproveDetails from "./manage/approve/details.vue";
diff --git a/resources/assets/js/pages/single/apps.vue b/resources/assets/js/pages/single/apps.vue
index 66abd0d5e..b10470c2a 100644
--- a/resources/assets/js/pages/single/apps.vue
+++ b/resources/assets/js/pages/single/apps.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import MicroApps from "../../components/MicroApps.vue";
+import MicroApps from "../../components/MicroApps";
 
 export default {
     components: { MicroApps },