diff --git a/MicroApp-bak b/MicroApp-bak
new file mode 100644
index 000000000..7d5dfdcfe
--- /dev/null
+++ b/MicroApp-bak
@@ -0,0 +1,246 @@
+import type { PropType, VNode } from 'vue-demi';
+import { defineComponent, h as hDemi, isVue2 } from 'vue-demi';
+import type { AppConfiguration, LifeCycles } from 'qiankun';
+import type { MicroAppType } from '@qiankunjs/ui-shared';
+import { mountMicroApp, omitSharedProps, unmountMicroApp, updateMicroApp } from '@qiankunjs/ui-shared';
+
+interface Options {
+  props?: object,
+  domProps?: object
+  on?: object
+}
+
+const adaptOnsV3 = (ons: object | undefined) => {
+  if (!ons) return null
+  return Object.entries(ons).reduce((ret, [key, handler]) => {
+    key = key.charAt(0).toUpperCase() + key.slice(1)
+    key = `on${key}`
+    return { ...ret, [key]: handler } as Record<string, unknown>;
+  }, {})
+}
+
+const h = (type: string | object, options: Options & unknown = {}, chidren?: unknown) => {
+  if (isVue2)
+    return hDemi(type, options, chidren)
+
+  const { props, domProps, on, ...extraOptions } = options
+
+  const ons = adaptOnsV3(on)
+  const params = { ...extraOptions, ...props, ...domProps, ...ons }
+  return hDemi(type, params, chidren)
+}
+
+const slot = (s: ((arg: Record<string, unknown>) => VNode[]) | VNode, attrs: Record<string, unknown>) => {
+  if (typeof s == 'function') return s(attrs)
+  return s
+};
+
+import MicroAppLoader from './MicroAppLoader';
+import ErrorBoundary from './ErrorBoundary';
+
+export const MicroApp = defineComponent({
+  name: 'MicroApp',
+  components: {
+    MicroAppLoader,
+    ErrorBoundary,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    entry: {
+      type: String,
+      required: true,
+    },
+    settings: {
+      type: Object as PropType<AppConfiguration>,
+      default: () => ({
+        sandbox: true,
+      }),
+    },
+    lifeCycles: {
+      type: Object as PropType<LifeCycles<Record<string, unknown>>>,
+    },
+    autoSetLoading: {
+      type: Boolean,
+      default: false,
+    },
+    autoCaptureError: {
+      type: Boolean,
+      default: false,
+    },
+    wrapperClassName: {
+      type: String,
+    },
+    className: {
+      type: String,
+    },
+  },
+  // template: `
+  //   <div ref="test">
+  //     asdf
+  //     <div v-if="autoSetLoading || autoCaptureError || $slots.loader || $slots.errorBoundary" :class="microAppWrapperClassName">
+  //       <slot v-if="$slots.loader" name="loader" :loading="loading" />
+  //       <micro-app-loader v-else-if="autoSetLoading" :loading="loading" />
+  //       <slot v-if="$slots.errorBoundary" name="errorBoundary" :error="error" />
+  //       <error-boundary v-else-if="autoCaptureError" :error="error" />
+  //       <div :class="microAppClassName" :ref="setContainerRef" />
+  //     </div>
+  //     <div v-else :class="microAppClassName" :ref="setContainerRef" />
+  //   </div>
+  // `,
+  render() {
+
+   return  (this.reactivePropsFromParams.autoSetLoading ||
+      this.reactivePropsFromParams.autoCaptureError ||
+      this.$slots.loader ||
+      this.$slots.errorBoundary)
+        ? h(
+            'div',
+            {
+              domProps: {
+                class: this.microAppWrapperClassName,
+              }
+            },
+            [
+              this.$slots.loader
+                ? this.$slots.loader(this.loading)
+                : this.reactivePropsFromParams.autoSetLoading &&
+                  h(MicroAppLoader, {
+                    props: {
+                      loading: this.loading,
+                    }
+                  }),
+              this.error
+                ? this.$slots.errorBoundary
+                  ? this.$slots.errorBoundary(this.error)
+                  : this.reactivePropsFromParams.autoCaptureError &&
+                    h(ErrorBoundary, {
+                      props: {
+                        error: this.error,
+                      }
+                    })
+                : null,
+              h('div', {
+                domProps: {
+                  class: this.microAppClassName,
+                },
+                props: {
+                  ref: 'containerRef',
+                }
+              }),
+            ],
+          )
+        : h('div', {
+            class: this.microAppClassName,
+            ref: 'containerRef',
+          });
+  },
+  mounted() {
+    console.log('vue binding');
+    this.mountMicroApp();
+  },
+
+  data() {
+    return {
+      loading: false,
+      error: undefined as Error | undefined,
+      microAppRef: undefined as MicroAppType | undefined,
+      containerRef: undefined as HTMLDivElement | undefined,
+    };
+  },
+  watch: {
+    name() {
+      this.mountMicroApp();
+    },
+    reactivePropsFromParams: {
+      handler() {
+        updateMicroApp({
+          getMicroApp: () => this.microAppRef,
+          setLoading: (l) => {
+            this.loading = l;
+          },
+          key: 'vue',
+        });
+      },
+      deep: true,
+    }
+  },
+  computed: {
+    isNeedShowError() {
+      return this.$slots.errorBoundary || this.autoCaptureError;
+    },
+
+    reactivePropsFromParams() {
+      return omitSharedProps({
+        ...this.$props,
+      });
+    },
+
+    microAppWrapperClassName() {
+      return this.wrapperClassName ? `${this.wrapperClassName} qiankun-micro-app-wrapper` : 'qiankun-micro-app-wrapper';
+    },
+
+    microAppClassName() {
+      return this.className ? `${this.className} qiankun-micro-app-container` : 'qiankun-micro-app-container';
+    },
+  },
+  methods: {
+    mountMicroApp() {
+      this.unmountMicroApp();
+
+      const container = this.$refs.containerRef as HTMLDivElement | undefined;
+
+      if (!container) {
+        return;
+      }
+
+      mountMicroApp({
+        props: this.$props,
+        container,
+        setMicroApp: (app?: MicroAppType) => {
+          this.microAppRef = app;
+        },
+        setLoading: (l) => {
+          this.loading = l;
+        },
+        setError: (err?: Error) => {
+          this.setComponentError(err);
+        },
+      });
+
+    },
+
+    unmountMicroApp() {
+      const microApp = this.microAppRef;
+
+      if (microApp) {
+        microApp._unmounting = true;
+
+        unmountMicroApp(microApp).catch((err: Error) => {
+          this.setComponentError(err);
+          this.loading = false;
+        });
+
+        this.microAppRef = undefined;
+      }
+    },
+
+    setComponentError(err: Error | undefined) {
+      if (this.isNeedShowError) {
+        this.error = err;
+        // error log 出来，不要吞
+        if (err) {
+          console.error(this.error);
+        }
+      } else if (err) {
+        throw err;
+      }
+    },
+
+    setContainerRef(item: HTMLDivElement) {
+      this.containerRef = item;
+    }
+  },
+});
diff --git a/examples/main-vue/.gitignore b/examples/main-vue/.gitignore
deleted file mode 100644
index 38adffa64..000000000
--- a/examples/main-vue/.gitignore
+++ /dev/null
@@ -1,28 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/examples/main-vue/README.md b/examples/main-vue/README.md
deleted file mode 100644
index ad4fb9e25..000000000
--- a/examples/main-vue/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# main-vue
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
diff --git a/examples/main-vue/env.d.ts b/examples/main-vue/env.d.ts
deleted file mode 100644
index 11f02fe2a..000000000
--- a/examples/main-vue/env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/examples/main-vue/index.html b/examples/main-vue/index.html
deleted file mode 100644
index a88854489..000000000
--- a/examples/main-vue/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
diff --git a/examples/main-vue/package.json b/examples/main-vue/package.json
deleted file mode 100644
index 8f3f059e9..000000000
--- a/examples/main-vue/package.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "name": "main-vue",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check build-only",
-    "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit"
-  },
-  "dependencies": {
-    "vue": "^3.2.47"
-  },
-  "devDependencies": {
-    "@types/node": "^18.14.2",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "@vue/tsconfig": "^0.1.3",
-    "npm-run-all": "^4.1.5",
-    "typescript": "~4.8.4",
-    "vite": "^4.1.4",
-    "vue-tsc": "^1.2.0"
-  }
-}
diff --git a/examples/main-vue/public/favicon.ico b/examples/main-vue/public/favicon.ico
deleted file mode 100644
index df36fcfb7..000000000
Binary files a/examples/main-vue/public/favicon.ico and /dev/null differ
diff --git a/examples/main-vue/src/App.vue b/examples/main-vue/src/App.vue
deleted file mode 100644
index c0e25b14d..000000000
--- a/examples/main-vue/src/App.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { MicroApp } from '../../../packages/ui-bindings/vue/dist/esm/'
-
-const name = ref('app');
-</script>
-
-<template>
-  <MicroApp :name="name" entry="//localhost:7102" />
-</template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
diff --git a/examples/main-vue/src/assets/base.css b/examples/main-vue/src/assets/base.css
deleted file mode 100644
index 71dc55a3c..000000000
--- a/examples/main-vue/src/assets/base.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
diff --git a/examples/main-vue/src/assets/logo.svg b/examples/main-vue/src/assets/logo.svg
deleted file mode 100644
index 756566035..000000000
--- a/examples/main-vue/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/examples/main-vue/src/assets/main.css b/examples/main-vue/src/assets/main.css
deleted file mode 100644
index e8667cd45..000000000
--- a/examples/main-vue/src/assets/main.css
+++ /dev/null
@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
diff --git a/examples/main-vue/src/main.ts b/examples/main-vue/src/main.ts
deleted file mode 100644
index 90e6400b4..000000000
--- a/examples/main-vue/src/main.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-
-import './assets/main.css'
-
-createApp(App).mount('#app')
diff --git a/examples/main-vue/tsconfig.json b/examples/main-vue/tsconfig.json
deleted file mode 100644
index cb2043bce..000000000
--- a/examples/main-vue/tsconfig.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}
diff --git a/examples/main-vue/tsconfig.node.json b/examples/main-vue/tsconfig.node.json
deleted file mode 100644
index 424084aa5..000000000
--- a/examples/main-vue/tsconfig.node.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
-  "compilerOptions": {
-    "composite": true,
-    "types": ["node"]
-  }
-}
diff --git a/examples/main-vue/vite.config.ts b/examples/main-vue/vite.config.ts
deleted file mode 100644
index 2fb21e917..000000000
--- a/examples/main-vue/vite.config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { fileURLToPath, URL } from 'node:url'
-
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue(), vueJsx()],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
diff --git a/examples/main/package.json b/examples/main/package.json
index 795f615a5..1f7fa7918 100644
--- a/examples/main/package.json
+++ b/examples/main/package.json
@@ -5,6 +5,8 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server",
+    "start:vue": "cross-env MODE=vue webpack-dev-server",
+    "start:vue3": "cross-env MODE=vue3 webpack-dev-server",
     "start:multiple": "cross-env MODE=multiple webpack-dev-server",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -27,8 +29,14 @@
     "qiankun": "^2.10.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "vue": "^2.6.11",
-    "zone.js": "^0.10.2"
+    "vue": "^3.3.9",
+    "zone.js": "^0.10.2",
+    "@vue/composition-api": "1.7.2"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "repository": "git@github.com:umijs/qiankun.git"
 }
diff --git a/examples/main/render/VanillaRender.js b/examples/main/render/VanillaRender.js
new file mode 100644
index 000000000..d19b08dac
--- /dev/null
+++ b/examples/main/render/VanillaRender.js
@@ -0,0 +1,32 @@
+import { loadMicroApp } from '../../../packages/qiankun/dist/esm';
+// import { loadMicroApp } from 'qiankun';
+import '../index.less';
+
+const microApps = [
+  { name: 'react15', entry: '//localhost:7102' },
+  { name: 'react16', entry: '//localhost:7100' },
+];
+
+let prevApp;
+let prevAppName;
+document.querySelector('.mainapp-sidemenu').addEventListener('click', async (e) => {
+  window.startTime = Date.now();
+  const app = microApps.find((app) => app.name === e.target.dataset.value);
+  if (app) {
+    if (app.name === prevAppName) return;
+
+    await prevApp?.unmount();
+
+    prevApp = loadMicroApp(
+      {
+        name: app.name,
+        entry: app.entry,
+        container: document.querySelector('#subapp-container'),
+      },
+      { sandbox: true },
+    );
+    prevAppName = app.name;
+  } else {
+    console.log('not found any app');
+  }
+});
diff --git a/examples/main/render/Vue3Render.js b/examples/main/render/Vue3Render.js
new file mode 100644
index 000000000..077247689
--- /dev/null
+++ b/examples/main/render/Vue3Render.js
@@ -0,0 +1,44 @@
+import { createApp, h } from 'vue';
+import { MicroApp } from '../../../packages/ui-bindings/vue/dist/esm';
+
+
+function vueRender() {
+  const application = createApp({
+    components: {
+    },
+    render() {
+      return h('div', [
+        this.message,
+        h(MicroApp, { name: 'react15', entry: '//localhost:7102' }),
+        this.message,
+      ]);
+    },
+    setup() {
+      const message = 'abc';
+
+      return {
+        message,
+      };
+      // return () => h('div', [
+      //   message.value,
+      //   h(MicroApp, { name: 'react15', entry: '//localhost:7102' }),
+      //   message.value,
+      // ]);
+    }
+  });
+
+  application.mount('#subapp-container');
+
+  return application;
+}
+
+let app = null;
+
+function render() {
+  if (!app) {
+    app = vueRender();
+    console.log(app)
+  }
+}
+
+render();
diff --git a/examples/main/render/VueRender.js b/examples/main/render/VueRender.js
index 06be24e27..b9001ce77 100644
--- a/examples/main/render/VueRender.js
+++ b/examples/main/render/VueRender.js
@@ -1,28 +1,44 @@
-import Vue from 'vue/dist/vue.esm';
+import Vue from 'vue/dist/vue.esm.js';
+import compositionApi  from '@vue/composition-api';
+import { MicroApp } from '../../../packages/ui-bindings/vue/dist/esm/';
 
-function vueRender({ loading }) {
+Vue.use(compositionApi);
+// Vue.component('MicroApp', MicroApp)
+function vueRender() {
   return new Vue({
+    components: {
+      MicroApp,
+    },
+    data: {
+      message: 'abc',
+    },
+    name: 'vueRender',
     template: `
-      <div id="subapp-container">
-        <h4 v-if="loading" class="subapp-loading">Loading...</h4>
-        <div id="subapp-viewport"></div>
+      <div>
+        <MicroApp name="react15" entry="//localhost:7102" />
       </div>
     `,
+    // render(h) {
+    //   return h('div', [
+    //     h(MicroApp, {
+    //       props: {
+    //         name: 'react15',
+    //         entry: '//localhost:7102',
+    //       }
+    //     }),
+    //   ]);
+    // },
     el: '#subapp-container',
-    data() {
-      return {
-        loading,
-      };
-    },
   });
 }
 
 let app = null;
 
-export default function render({ loading }) {
+function render() {
   if (!app) {
-    app = vueRender({ loading });
-  } else {
-    app.loading = loading;
+    app = vueRender();
+    console.log(app)
   }
 }
+
+render();
diff --git a/examples/main/webpack.config.js b/examples/main/webpack.config.js
index 986d16c26..7c6f826f8 100644
--- a/examples/main/webpack.config.js
+++ b/examples/main/webpack.config.js
@@ -1,8 +1,23 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { name } = require('./package');
+const path = require('path');
+
+const modeEntryMap = {
+  multiple: './multiple.js',
+  vue: './render/VueRender.js',
+  vue3: './render/Vue3Render.js',
+  undefined: './render/VanillaRender.js',
+}
+
+const modeHTMLMap = {
+  multiple: './multiple.html',
+  vue: './index.html',
+  vue3: './index.html',
+  undefined: './index.html',
+}
 
 module.exports = {
-  entry: process.env.MODE === 'multiple' ? './multiple.js' : './index.js',
+  entry: modeEntryMap[process.env.MODE],
   devtool: 'source-map',
   devServer: {
     open: true,
@@ -22,6 +37,10 @@ module.exports = {
   mode: 'development',
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    alias: {
+      vue: path.join(__dirname, 'node_modules/vue')
+      // '@vue/composition-api': path.join(__dirname, 'node_modules/@vue/composition-api')
+    }
   },
   module: {
     rules: [
@@ -45,7 +64,7 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: process.env.MODE === 'multiple' ? './multiple.html' : './index.html',
+      template: modeHTMLMap[process.env.MODE],
       minify: {
         removeComments: true,
         collapseWhitespace: true,
diff --git a/packages/qiankun/src/version.ts b/packages/qiankun/src/version.ts
index a7250834f..2fccac6f3 100644
--- a/packages/qiankun/src/version.ts
+++ b/packages/qiankun/src/version.ts
@@ -1 +1 @@
-export { version } from '../package.json';
+export const version = '3.0.0-rc.11';
\ No newline at end of file
diff --git a/packages/sandbox/src/core/globals.ts b/packages/sandbox/src/core/globals.ts
index 2103ebea6..3ead7b791 100644
--- a/packages/sandbox/src/core/globals.ts
+++ b/packages/sandbox/src/core/globals.ts
@@ -1,792 +1,791 @@
 // generated from https://github.com/sindresorhus/globals/blob/main/globals.json es2015 part
 // only init its values while Proxy is supported
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-export const globalsInES2015 = window.Proxy
-  ? [
-      'Array',
-      'ArrayBuffer',
-      'Boolean',
-      'constructor',
-      'DataView',
-      'Date',
-      'decodeURI',
-      'decodeURIComponent',
-      'encodeURI',
-      'encodeURIComponent',
-      'Error',
-      'escape',
-      'eval',
-      'EvalError',
-      'Float32Array',
-      'Float64Array',
-      'Function',
-      'hasOwnProperty',
-      'Infinity',
-      'Int16Array',
-      'Int32Array',
-      'Int8Array',
-      'isFinite',
-      'isNaN',
-      'isPrototypeOf',
-      'JSON',
-      'Map',
-      'Math',
-      'NaN',
-      'Number',
-      'Object',
-      'parseFloat',
-      'parseInt',
-      'Promise',
-      'propertyIsEnumerable',
-      'Proxy',
-      'RangeError',
-      'ReferenceError',
-      'Reflect',
-      'RegExp',
-      'Set',
-      'String',
-      'Symbol',
-      'SyntaxError',
-      'toLocaleString',
-      'toString',
-      'TypeError',
-      'Uint16Array',
-      'Uint32Array',
-      'Uint8Array',
-      'Uint8ClampedArray',
-      'undefined',
-      'unescape',
-      'URIError',
-      'valueOf',
-      'WeakMap',
-      'WeakSet',
-    ].filter((p) => /* just keep the available properties in current window context */ p in window)
-  : [];
+export const globalsInES2015 = window.Proxy ? [
+  "Array",
+  "ArrayBuffer",
+  "Boolean",
+  "constructor",
+  "DataView",
+  "Date",
+  "decodeURI",
+  "decodeURIComponent",
+  "encodeURI",
+  "encodeURIComponent",
+  "Error",
+  "escape",
+  "eval",
+  "EvalError",
+  "Float32Array",
+  "Float64Array",
+  "Function",
+  "hasOwnProperty",
+  "Infinity",
+  "Int16Array",
+  "Int32Array",
+  "Int8Array",
+  "isFinite",
+  "isNaN",
+  "isPrototypeOf",
+  "JSON",
+  "Map",
+  "Math",
+  "NaN",
+  "Number",
+  "Object",
+  "parseFloat",
+  "parseInt",
+  "Promise",
+  "propertyIsEnumerable",
+  "Proxy",
+  "RangeError",
+  "ReferenceError",
+  "Reflect",
+  "RegExp",
+  "Set",
+  "String",
+  "Symbol",
+  "SyntaxError",
+  "toLocaleString",
+  "toString",
+  "TypeError",
+  "Uint16Array",
+  "Uint32Array",
+  "Uint8Array",
+  "Uint8ClampedArray",
+  "undefined",
+  "unescape",
+  "URIError",
+  "valueOf",
+  "WeakMap",
+  "WeakSet"
+].filter(p => /* just keep the available properties in current window context */ p in window) : [];
 
 export const globalsInBrowser = [
-  'AbortController',
-  'AbortSignal',
-  'addEventListener',
-  'alert',
-  'AnalyserNode',
-  'Animation',
-  'AnimationEffectReadOnly',
-  'AnimationEffectTiming',
-  'AnimationEffectTimingReadOnly',
-  'AnimationEvent',
-  'AnimationPlaybackEvent',
-  'AnimationTimeline',
-  'applicationCache',
-  'ApplicationCache',
-  'ApplicationCacheErrorEvent',
-  'atob',
-  'Attr',
-  'Audio',
-  'AudioBuffer',
-  'AudioBufferSourceNode',
-  'AudioContext',
-  'AudioDestinationNode',
-  'AudioListener',
-  'AudioNode',
-  'AudioParam',
-  'AudioProcessingEvent',
-  'AudioScheduledSourceNode',
-  'AudioWorkletGlobalScope',
-  'AudioWorkletNode',
-  'AudioWorkletProcessor',
-  'BarProp',
-  'BaseAudioContext',
-  'BatteryManager',
-  'BeforeUnloadEvent',
-  'BiquadFilterNode',
-  'Blob',
-  'BlobEvent',
-  'blur',
-  'BroadcastChannel',
-  'btoa',
-  'BudgetService',
-  'ByteLengthQueuingStrategy',
-  'Cache',
-  'caches',
-  'CacheStorage',
-  'cancelAnimationFrame',
-  'cancelIdleCallback',
-  'CanvasCaptureMediaStreamTrack',
-  'CanvasGradient',
-  'CanvasPattern',
-  'CanvasRenderingContext2D',
-  'ChannelMergerNode',
-  'ChannelSplitterNode',
-  'CharacterData',
-  'clearInterval',
-  'clearTimeout',
-  'clientInformation',
-  'ClipboardEvent',
-  'ClipboardItem',
-  'close',
-  'closed',
-  'CloseEvent',
-  'Comment',
-  'CompositionEvent',
-  'confirm',
-  'console',
-  'ConstantSourceNode',
-  'ConvolverNode',
-  'CountQueuingStrategy',
-  'createImageBitmap',
-  'Credential',
-  'CredentialsContainer',
-  'crypto',
-  'Crypto',
-  'CryptoKey',
-  'CSS',
-  'CSSConditionRule',
-  'CSSFontFaceRule',
-  'CSSGroupingRule',
-  'CSSImportRule',
-  'CSSKeyframeRule',
-  'CSSKeyframesRule',
-  'CSSMatrixComponent',
-  'CSSMediaRule',
-  'CSSNamespaceRule',
-  'CSSPageRule',
-  'CSSPerspective',
-  'CSSRotate',
-  'CSSRule',
-  'CSSRuleList',
-  'CSSScale',
-  'CSSSkew',
-  'CSSSkewX',
-  'CSSSkewY',
-  'CSSStyleDeclaration',
-  'CSSStyleRule',
-  'CSSStyleSheet',
-  'CSSSupportsRule',
-  'CSSTransformValue',
-  'CSSTranslate',
-  'CustomElementRegistry',
-  'customElements',
-  'CustomEvent',
-  'DataTransfer',
-  'DataTransferItem',
-  'DataTransferItemList',
-  'defaultstatus',
-  'defaultStatus',
-  'DelayNode',
-  'DeviceMotionEvent',
-  'DeviceOrientationEvent',
-  'devicePixelRatio',
-  'dispatchEvent',
-  'document',
-  'Document',
-  'DocumentFragment',
-  'DocumentType',
-  'DOMError',
-  'DOMException',
-  'DOMImplementation',
-  'DOMMatrix',
-  'DOMMatrixReadOnly',
-  'DOMParser',
-  'DOMPoint',
-  'DOMPointReadOnly',
-  'DOMQuad',
-  'DOMRect',
-  'DOMRectList',
-  'DOMRectReadOnly',
-  'DOMStringList',
-  'DOMStringMap',
-  'DOMTokenList',
-  'DragEvent',
-  'DynamicsCompressorNode',
-  'Element',
-  'ErrorEvent',
-  'event',
-  'Event',
-  'EventSource',
-  'EventTarget',
-  'external',
-  'fetch',
-  'File',
-  'FileList',
-  'FileReader',
-  'find',
-  'focus',
-  'FocusEvent',
-  'FontFace',
-  'FontFaceSetLoadEvent',
-  'FormData',
-  'FormDataEvent',
-  'frameElement',
-  'frames',
-  'GainNode',
-  'Gamepad',
-  'GamepadButton',
-  'GamepadEvent',
-  'getComputedStyle',
-  'getSelection',
-  'HashChangeEvent',
-  'Headers',
-  'history',
-  'History',
-  'HTMLAllCollection',
-  'HTMLAnchorElement',
-  'HTMLAreaElement',
-  'HTMLAudioElement',
-  'HTMLBaseElement',
-  'HTMLBodyElement',
-  'HTMLBRElement',
-  'HTMLButtonElement',
-  'HTMLCanvasElement',
-  'HTMLCollection',
-  'HTMLContentElement',
-  'HTMLDataElement',
-  'HTMLDataListElement',
-  'HTMLDetailsElement',
-  'HTMLDialogElement',
-  'HTMLDirectoryElement',
-  'HTMLDivElement',
-  'HTMLDListElement',
-  'HTMLDocument',
-  'HTMLElement',
-  'HTMLEmbedElement',
-  'HTMLFieldSetElement',
-  'HTMLFontElement',
-  'HTMLFormControlsCollection',
-  'HTMLFormElement',
-  'HTMLFrameElement',
-  'HTMLFrameSetElement',
-  'HTMLHeadElement',
-  'HTMLHeadingElement',
-  'HTMLHRElement',
-  'HTMLHtmlElement',
-  'HTMLIFrameElement',
-  'HTMLImageElement',
-  'HTMLInputElement',
-  'HTMLLabelElement',
-  'HTMLLegendElement',
-  'HTMLLIElement',
-  'HTMLLinkElement',
-  'HTMLMapElement',
-  'HTMLMarqueeElement',
-  'HTMLMediaElement',
-  'HTMLMenuElement',
-  'HTMLMetaElement',
-  'HTMLMeterElement',
-  'HTMLModElement',
-  'HTMLObjectElement',
-  'HTMLOListElement',
-  'HTMLOptGroupElement',
-  'HTMLOptionElement',
-  'HTMLOptionsCollection',
-  'HTMLOutputElement',
-  'HTMLParagraphElement',
-  'HTMLParamElement',
-  'HTMLPictureElement',
-  'HTMLPreElement',
-  'HTMLProgressElement',
-  'HTMLQuoteElement',
-  'HTMLScriptElement',
-  'HTMLSelectElement',
-  'HTMLShadowElement',
-  'HTMLSlotElement',
-  'HTMLSourceElement',
-  'HTMLSpanElement',
-  'HTMLStyleElement',
-  'HTMLTableCaptionElement',
-  'HTMLTableCellElement',
-  'HTMLTableColElement',
-  'HTMLTableElement',
-  'HTMLTableRowElement',
-  'HTMLTableSectionElement',
-  'HTMLTemplateElement',
-  'HTMLTextAreaElement',
-  'HTMLTimeElement',
-  'HTMLTitleElement',
-  'HTMLTrackElement',
-  'HTMLUListElement',
-  'HTMLUnknownElement',
-  'HTMLVideoElement',
-  'IDBCursor',
-  'IDBCursorWithValue',
-  'IDBDatabase',
-  'IDBFactory',
-  'IDBIndex',
-  'IDBKeyRange',
-  'IDBObjectStore',
-  'IDBOpenDBRequest',
-  'IDBRequest',
-  'IDBTransaction',
-  'IDBVersionChangeEvent',
-  'IdleDeadline',
-  'IIRFilterNode',
-  'Image',
-  'ImageBitmap',
-  'ImageBitmapRenderingContext',
-  'ImageCapture',
-  'ImageData',
-  'indexedDB',
-  'innerHeight',
-  'innerWidth',
-  'InputEvent',
-  'IntersectionObserver',
-  'IntersectionObserverEntry',
-  'Intl',
-  'isSecureContext',
-  'KeyboardEvent',
-  'KeyframeEffect',
-  'KeyframeEffectReadOnly',
-  'length',
-  'localStorage',
-  'location',
-  'Location',
-  'locationbar',
-  'matchMedia',
-  'MediaDeviceInfo',
-  'MediaDevices',
-  'MediaElementAudioSourceNode',
-  'MediaEncryptedEvent',
-  'MediaError',
-  'MediaKeyMessageEvent',
-  'MediaKeySession',
-  'MediaKeyStatusMap',
-  'MediaKeySystemAccess',
-  'MediaList',
-  'MediaMetadata',
-  'MediaQueryList',
-  'MediaQueryListEvent',
-  'MediaRecorder',
-  'MediaSettingsRange',
-  'MediaSource',
-  'MediaStream',
-  'MediaStreamAudioDestinationNode',
-  'MediaStreamAudioSourceNode',
-  'MediaStreamEvent',
-  'MediaStreamTrack',
-  'MediaStreamTrackEvent',
-  'menubar',
-  'MessageChannel',
-  'MessageEvent',
-  'MessagePort',
-  'MIDIAccess',
-  'MIDIConnectionEvent',
-  'MIDIInput',
-  'MIDIInputMap',
-  'MIDIMessageEvent',
-  'MIDIOutput',
-  'MIDIOutputMap',
-  'MIDIPort',
-  'MimeType',
-  'MimeTypeArray',
-  'MouseEvent',
-  'moveBy',
-  'moveTo',
-  'MutationEvent',
-  'MutationObserver',
-  'MutationRecord',
-  'name',
-  'NamedNodeMap',
-  'NavigationPreloadManager',
-  'navigator',
-  'Navigator',
-  'NavigatorUAData',
-  'NetworkInformation',
-  'Node',
-  'NodeFilter',
-  'NodeIterator',
-  'NodeList',
-  'Notification',
-  'OfflineAudioCompletionEvent',
-  'OfflineAudioContext',
-  'offscreenBuffering',
-  'OffscreenCanvas',
-  'OffscreenCanvasRenderingContext2D',
-  'onabort',
-  'onafterprint',
-  'onanimationend',
-  'onanimationiteration',
-  'onanimationstart',
-  'onappinstalled',
-  'onauxclick',
-  'onbeforeinstallprompt',
-  'onbeforeprint',
-  'onbeforeunload',
-  'onblur',
-  'oncancel',
-  'oncanplay',
-  'oncanplaythrough',
-  'onchange',
-  'onclick',
-  'onclose',
-  'oncontextmenu',
-  'oncuechange',
-  'ondblclick',
-  'ondevicemotion',
-  'ondeviceorientation',
-  'ondeviceorientationabsolute',
-  'ondrag',
-  'ondragend',
-  'ondragenter',
-  'ondragleave',
-  'ondragover',
-  'ondragstart',
-  'ondrop',
-  'ondurationchange',
-  'onemptied',
-  'onended',
-  'onerror',
-  'onfocus',
-  'ongotpointercapture',
-  'onhashchange',
-  'oninput',
-  'oninvalid',
-  'onkeydown',
-  'onkeypress',
-  'onkeyup',
-  'onlanguagechange',
-  'onload',
-  'onloadeddata',
-  'onloadedmetadata',
-  'onloadstart',
-  'onlostpointercapture',
-  'onmessage',
-  'onmessageerror',
-  'onmousedown',
-  'onmouseenter',
-  'onmouseleave',
-  'onmousemove',
-  'onmouseout',
-  'onmouseover',
-  'onmouseup',
-  'onmousewheel',
-  'onoffline',
-  'ononline',
-  'onpagehide',
-  'onpageshow',
-  'onpause',
-  'onplay',
-  'onplaying',
-  'onpointercancel',
-  'onpointerdown',
-  'onpointerenter',
-  'onpointerleave',
-  'onpointermove',
-  'onpointerout',
-  'onpointerover',
-  'onpointerup',
-  'onpopstate',
-  'onprogress',
-  'onratechange',
-  'onrejectionhandled',
-  'onreset',
-  'onresize',
-  'onscroll',
-  'onsearch',
-  'onseeked',
-  'onseeking',
-  'onselect',
-  'onstalled',
-  'onstorage',
-  'onsubmit',
-  'onsuspend',
-  'ontimeupdate',
-  'ontoggle',
-  'ontransitionend',
-  'onunhandledrejection',
-  'onunload',
-  'onvolumechange',
-  'onwaiting',
-  'onwheel',
-  'open',
-  'openDatabase',
-  'opener',
-  'Option',
-  'origin',
-  'OscillatorNode',
-  'outerHeight',
-  'outerWidth',
-  'OverconstrainedError',
-  'PageTransitionEvent',
-  'pageXOffset',
-  'pageYOffset',
-  'PannerNode',
-  'parent',
-  'Path2D',
-  'PaymentAddress',
-  'PaymentRequest',
-  'PaymentRequestUpdateEvent',
-  'PaymentResponse',
-  'performance',
-  'Performance',
-  'PerformanceEntry',
-  'PerformanceLongTaskTiming',
-  'PerformanceMark',
-  'PerformanceMeasure',
-  'PerformanceNavigation',
-  'PerformanceNavigationTiming',
-  'PerformanceObserver',
-  'PerformanceObserverEntryList',
-  'PerformancePaintTiming',
-  'PerformanceResourceTiming',
-  'PerformanceTiming',
-  'PeriodicWave',
-  'Permissions',
-  'PermissionStatus',
-  'personalbar',
-  'PhotoCapabilities',
-  'Plugin',
-  'PluginArray',
-  'PointerEvent',
-  'PopStateEvent',
-  'postMessage',
-  'Presentation',
-  'PresentationAvailability',
-  'PresentationConnection',
-  'PresentationConnectionAvailableEvent',
-  'PresentationConnectionCloseEvent',
-  'PresentationConnectionList',
-  'PresentationReceiver',
-  'PresentationRequest',
-  'print',
-  'ProcessingInstruction',
-  'ProgressEvent',
-  'PromiseRejectionEvent',
-  'prompt',
-  'PushManager',
-  'PushSubscription',
-  'PushSubscriptionOptions',
-  'queueMicrotask',
-  'RadioNodeList',
-  'Range',
-  'ReadableStream',
-  'registerProcessor',
-  'RemotePlayback',
-  'removeEventListener',
-  'reportError',
-  'Request',
-  'requestAnimationFrame',
-  'requestIdleCallback',
-  'resizeBy',
-  'ResizeObserver',
-  'ResizeObserverEntry',
-  'resizeTo',
-  'Response',
-  'RTCCertificate',
-  'RTCDataChannel',
-  'RTCDataChannelEvent',
-  'RTCDtlsTransport',
-  'RTCIceCandidate',
-  'RTCIceGatherer',
-  'RTCIceTransport',
-  'RTCPeerConnection',
-  'RTCPeerConnectionIceEvent',
-  'RTCRtpContributingSource',
-  'RTCRtpReceiver',
-  'RTCRtpSender',
-  'RTCSctpTransport',
-  'RTCSessionDescription',
-  'RTCStatsReport',
-  'RTCTrackEvent',
-  'screen',
-  'Screen',
-  'screenLeft',
-  'ScreenOrientation',
-  'screenTop',
-  'screenX',
-  'screenY',
-  'ScriptProcessorNode',
-  'scroll',
-  'scrollbars',
-  'scrollBy',
-  'scrollTo',
-  'scrollX',
-  'scrollY',
-  'SecurityPolicyViolationEvent',
-  'Selection',
-  'self',
-  'ServiceWorker',
-  'ServiceWorkerContainer',
-  'ServiceWorkerRegistration',
-  'sessionStorage',
-  'setInterval',
-  'setTimeout',
-  'ShadowRoot',
-  'SharedWorker',
-  'SourceBuffer',
-  'SourceBufferList',
-  'speechSynthesis',
-  'SpeechSynthesisEvent',
-  'SpeechSynthesisUtterance',
-  'StaticRange',
-  'status',
-  'statusbar',
-  'StereoPannerNode',
-  'stop',
-  'Storage',
-  'StorageEvent',
-  'StorageManager',
-  'structuredClone',
-  'styleMedia',
-  'StyleSheet',
-  'StyleSheetList',
-  'SubmitEvent',
-  'SubtleCrypto',
-  'SVGAElement',
-  'SVGAngle',
-  'SVGAnimatedAngle',
-  'SVGAnimatedBoolean',
-  'SVGAnimatedEnumeration',
-  'SVGAnimatedInteger',
-  'SVGAnimatedLength',
-  'SVGAnimatedLengthList',
-  'SVGAnimatedNumber',
-  'SVGAnimatedNumberList',
-  'SVGAnimatedPreserveAspectRatio',
-  'SVGAnimatedRect',
-  'SVGAnimatedString',
-  'SVGAnimatedTransformList',
-  'SVGAnimateElement',
-  'SVGAnimateMotionElement',
-  'SVGAnimateTransformElement',
-  'SVGAnimationElement',
-  'SVGCircleElement',
-  'SVGClipPathElement',
-  'SVGComponentTransferFunctionElement',
-  'SVGDefsElement',
-  'SVGDescElement',
-  'SVGDiscardElement',
-  'SVGElement',
-  'SVGEllipseElement',
-  'SVGFEBlendElement',
-  'SVGFEColorMatrixElement',
-  'SVGFEComponentTransferElement',
-  'SVGFECompositeElement',
-  'SVGFEConvolveMatrixElement',
-  'SVGFEDiffuseLightingElement',
-  'SVGFEDisplacementMapElement',
-  'SVGFEDistantLightElement',
-  'SVGFEDropShadowElement',
-  'SVGFEFloodElement',
-  'SVGFEFuncAElement',
-  'SVGFEFuncBElement',
-  'SVGFEFuncGElement',
-  'SVGFEFuncRElement',
-  'SVGFEGaussianBlurElement',
-  'SVGFEImageElement',
-  'SVGFEMergeElement',
-  'SVGFEMergeNodeElement',
-  'SVGFEMorphologyElement',
-  'SVGFEOffsetElement',
-  'SVGFEPointLightElement',
-  'SVGFESpecularLightingElement',
-  'SVGFESpotLightElement',
-  'SVGFETileElement',
-  'SVGFETurbulenceElement',
-  'SVGFilterElement',
-  'SVGForeignObjectElement',
-  'SVGGElement',
-  'SVGGeometryElement',
-  'SVGGradientElement',
-  'SVGGraphicsElement',
-  'SVGImageElement',
-  'SVGLength',
-  'SVGLengthList',
-  'SVGLinearGradientElement',
-  'SVGLineElement',
-  'SVGMarkerElement',
-  'SVGMaskElement',
-  'SVGMatrix',
-  'SVGMetadataElement',
-  'SVGMPathElement',
-  'SVGNumber',
-  'SVGNumberList',
-  'SVGPathElement',
-  'SVGPatternElement',
-  'SVGPoint',
-  'SVGPointList',
-  'SVGPolygonElement',
-  'SVGPolylineElement',
-  'SVGPreserveAspectRatio',
-  'SVGRadialGradientElement',
-  'SVGRect',
-  'SVGRectElement',
-  'SVGScriptElement',
-  'SVGSetElement',
-  'SVGStopElement',
-  'SVGStringList',
-  'SVGStyleElement',
-  'SVGSVGElement',
-  'SVGSwitchElement',
-  'SVGSymbolElement',
-  'SVGTextContentElement',
-  'SVGTextElement',
-  'SVGTextPathElement',
-  'SVGTextPositioningElement',
-  'SVGTitleElement',
-  'SVGTransform',
-  'SVGTransformList',
-  'SVGTSpanElement',
-  'SVGUnitTypes',
-  'SVGUseElement',
-  'SVGViewElement',
-  'TaskAttributionTiming',
-  'Text',
-  'TextDecoder',
-  'TextEncoder',
-  'TextEvent',
-  'TextMetrics',
-  'TextTrack',
-  'TextTrackCue',
-  'TextTrackCueList',
-  'TextTrackList',
-  'TimeRanges',
-  'toolbar',
-  'top',
-  'Touch',
-  'TouchEvent',
-  'TouchList',
-  'TrackEvent',
-  'TransformStream',
-  'TransitionEvent',
-  'TreeWalker',
-  'UIEvent',
-  'URL',
-  'URLSearchParams',
-  'ValidityState',
-  'visualViewport',
-  'VisualViewport',
-  'VTTCue',
-  'WaveShaperNode',
-  'WebAssembly',
-  'WebGL2RenderingContext',
-  'WebGLActiveInfo',
-  'WebGLBuffer',
-  'WebGLContextEvent',
-  'WebGLFramebuffer',
-  'WebGLProgram',
-  'WebGLQuery',
-  'WebGLRenderbuffer',
-  'WebGLRenderingContext',
-  'WebGLSampler',
-  'WebGLShader',
-  'WebGLShaderPrecisionFormat',
-  'WebGLSync',
-  'WebGLTexture',
-  'WebGLTransformFeedback',
-  'WebGLUniformLocation',
-  'WebGLVertexArrayObject',
-  'WebSocket',
-  'WheelEvent',
-  'window',
-  'Window',
-  'Worker',
-  'WritableStream',
-  'XMLDocument',
-  'XMLHttpRequest',
-  'XMLHttpRequestEventTarget',
-  'XMLHttpRequestUpload',
-  'XMLSerializer',
-  'XPathEvaluator',
-  'XPathExpression',
-  'XPathResult',
-  'XSLTProcessor',
+  "AbortController",
+  "AbortSignal",
+  "addEventListener",
+  "alert",
+  "AnalyserNode",
+  "Animation",
+  "AnimationEffectReadOnly",
+  "AnimationEffectTiming",
+  "AnimationEffectTimingReadOnly",
+  "AnimationEvent",
+  "AnimationPlaybackEvent",
+  "AnimationTimeline",
+  "applicationCache",
+  "ApplicationCache",
+  "ApplicationCacheErrorEvent",
+  "atob",
+  "Attr",
+  "Audio",
+  "AudioBuffer",
+  "AudioBufferSourceNode",
+  "AudioContext",
+  "AudioDestinationNode",
+  "AudioListener",
+  "AudioNode",
+  "AudioParam",
+  "AudioProcessingEvent",
+  "AudioScheduledSourceNode",
+  "AudioWorkletGlobalScope",
+  "AudioWorkletNode",
+  "AudioWorkletProcessor",
+  "BarProp",
+  "BaseAudioContext",
+  "BatteryManager",
+  "BeforeUnloadEvent",
+  "BiquadFilterNode",
+  "Blob",
+  "BlobEvent",
+  "blur",
+  "BroadcastChannel",
+  "btoa",
+  "BudgetService",
+  "ByteLengthQueuingStrategy",
+  "Cache",
+  "caches",
+  "CacheStorage",
+  "cancelAnimationFrame",
+  "cancelIdleCallback",
+  "CanvasCaptureMediaStreamTrack",
+  "CanvasGradient",
+  "CanvasPattern",
+  "CanvasRenderingContext2D",
+  "ChannelMergerNode",
+  "ChannelSplitterNode",
+  "CharacterData",
+  "clearInterval",
+  "clearTimeout",
+  "clientInformation",
+  "ClipboardEvent",
+  "ClipboardItem",
+  "close",
+  "closed",
+  "CloseEvent",
+  "Comment",
+  "CompositionEvent",
+  "confirm",
+  "console",
+  "ConstantSourceNode",
+  "ConvolverNode",
+  "CountQueuingStrategy",
+  "createImageBitmap",
+  "Credential",
+  "CredentialsContainer",
+  "crypto",
+  "Crypto",
+  "CryptoKey",
+  "CSS",
+  "CSSConditionRule",
+  "CSSFontFaceRule",
+  "CSSGroupingRule",
+  "CSSImportRule",
+  "CSSKeyframeRule",
+  "CSSKeyframesRule",
+  "CSSMatrixComponent",
+  "CSSMediaRule",
+  "CSSNamespaceRule",
+  "CSSPageRule",
+  "CSSPerspective",
+  "CSSRotate",
+  "CSSRule",
+  "CSSRuleList",
+  "CSSScale",
+  "CSSSkew",
+  "CSSSkewX",
+  "CSSSkewY",
+  "CSSStyleDeclaration",
+  "CSSStyleRule",
+  "CSSStyleSheet",
+  "CSSSupportsRule",
+  "CSSTransformValue",
+  "CSSTranslate",
+  "CustomElementRegistry",
+  "customElements",
+  "CustomEvent",
+  "DataTransfer",
+  "DataTransferItem",
+  "DataTransferItemList",
+  "defaultstatus",
+  "defaultStatus",
+  "DelayNode",
+  "DeviceMotionEvent",
+  "DeviceOrientationEvent",
+  "devicePixelRatio",
+  "dispatchEvent",
+  "document",
+  "Document",
+  "DocumentFragment",
+  "DocumentType",
+  "DOMError",
+  "DOMException",
+  "DOMImplementation",
+  "DOMMatrix",
+  "DOMMatrixReadOnly",
+  "DOMParser",
+  "DOMPoint",
+  "DOMPointReadOnly",
+  "DOMQuad",
+  "DOMRect",
+  "DOMRectList",
+  "DOMRectReadOnly",
+  "DOMStringList",
+  "DOMStringMap",
+  "DOMTokenList",
+  "DragEvent",
+  "DynamicsCompressorNode",
+  "Element",
+  "ErrorEvent",
+  "event",
+  "Event",
+  "EventSource",
+  "EventTarget",
+  "external",
+  "fetch",
+  "File",
+  "FileList",
+  "FileReader",
+  "find",
+  "focus",
+  "FocusEvent",
+  "FontFace",
+  "FontFaceSetLoadEvent",
+  "FormData",
+  "FormDataEvent",
+  "frameElement",
+  "frames",
+  "GainNode",
+  "Gamepad",
+  "GamepadButton",
+  "GamepadEvent",
+  "getComputedStyle",
+  "getSelection",
+  "HashChangeEvent",
+  "Headers",
+  "history",
+  "History",
+  "HTMLAllCollection",
+  "HTMLAnchorElement",
+  "HTMLAreaElement",
+  "HTMLAudioElement",
+  "HTMLBaseElement",
+  "HTMLBodyElement",
+  "HTMLBRElement",
+  "HTMLButtonElement",
+  "HTMLCanvasElement",
+  "HTMLCollection",
+  "HTMLContentElement",
+  "HTMLDataElement",
+  "HTMLDataListElement",
+  "HTMLDetailsElement",
+  "HTMLDialogElement",
+  "HTMLDirectoryElement",
+  "HTMLDivElement",
+  "HTMLDListElement",
+  "HTMLDocument",
+  "HTMLElement",
+  "HTMLEmbedElement",
+  "HTMLFieldSetElement",
+  "HTMLFontElement",
+  "HTMLFormControlsCollection",
+  "HTMLFormElement",
+  "HTMLFrameElement",
+  "HTMLFrameSetElement",
+  "HTMLHeadElement",
+  "HTMLHeadingElement",
+  "HTMLHRElement",
+  "HTMLHtmlElement",
+  "HTMLIFrameElement",
+  "HTMLImageElement",
+  "HTMLInputElement",
+  "HTMLLabelElement",
+  "HTMLLegendElement",
+  "HTMLLIElement",
+  "HTMLLinkElement",
+  "HTMLMapElement",
+  "HTMLMarqueeElement",
+  "HTMLMediaElement",
+  "HTMLMenuElement",
+  "HTMLMetaElement",
+  "HTMLMeterElement",
+  "HTMLModElement",
+  "HTMLObjectElement",
+  "HTMLOListElement",
+  "HTMLOptGroupElement",
+  "HTMLOptionElement",
+  "HTMLOptionsCollection",
+  "HTMLOutputElement",
+  "HTMLParagraphElement",
+  "HTMLParamElement",
+  "HTMLPictureElement",
+  "HTMLPreElement",
+  "HTMLProgressElement",
+  "HTMLQuoteElement",
+  "HTMLScriptElement",
+  "HTMLSelectElement",
+  "HTMLShadowElement",
+  "HTMLSlotElement",
+  "HTMLSourceElement",
+  "HTMLSpanElement",
+  "HTMLStyleElement",
+  "HTMLTableCaptionElement",
+  "HTMLTableCellElement",
+  "HTMLTableColElement",
+  "HTMLTableElement",
+  "HTMLTableRowElement",
+  "HTMLTableSectionElement",
+  "HTMLTemplateElement",
+  "HTMLTextAreaElement",
+  "HTMLTimeElement",
+  "HTMLTitleElement",
+  "HTMLTrackElement",
+  "HTMLUListElement",
+  "HTMLUnknownElement",
+  "HTMLVideoElement",
+  "IDBCursor",
+  "IDBCursorWithValue",
+  "IDBDatabase",
+  "IDBFactory",
+  "IDBIndex",
+  "IDBKeyRange",
+  "IDBObjectStore",
+  "IDBOpenDBRequest",
+  "IDBRequest",
+  "IDBTransaction",
+  "IDBVersionChangeEvent",
+  "IdleDeadline",
+  "IIRFilterNode",
+  "Image",
+  "ImageBitmap",
+  "ImageBitmapRenderingContext",
+  "ImageCapture",
+  "ImageData",
+  "indexedDB",
+  "innerHeight",
+  "innerWidth",
+  "InputEvent",
+  "IntersectionObserver",
+  "IntersectionObserverEntry",
+  "Intl",
+  "isSecureContext",
+  "KeyboardEvent",
+  "KeyframeEffect",
+  "KeyframeEffectReadOnly",
+  "length",
+  "localStorage",
+  "location",
+  "Location",
+  "locationbar",
+  "matchMedia",
+  "MediaDeviceInfo",
+  "MediaDevices",
+  "MediaElementAudioSourceNode",
+  "MediaEncryptedEvent",
+  "MediaError",
+  "MediaKeyMessageEvent",
+  "MediaKeySession",
+  "MediaKeyStatusMap",
+  "MediaKeySystemAccess",
+  "MediaList",
+  "MediaMetadata",
+  "MediaQueryList",
+  "MediaQueryListEvent",
+  "MediaRecorder",
+  "MediaSettingsRange",
+  "MediaSource",
+  "MediaStream",
+  "MediaStreamAudioDestinationNode",
+  "MediaStreamAudioSourceNode",
+  "MediaStreamEvent",
+  "MediaStreamTrack",
+  "MediaStreamTrackEvent",
+  "menubar",
+  "MessageChannel",
+  "MessageEvent",
+  "MessagePort",
+  "MIDIAccess",
+  "MIDIConnectionEvent",
+  "MIDIInput",
+  "MIDIInputMap",
+  "MIDIMessageEvent",
+  "MIDIOutput",
+  "MIDIOutputMap",
+  "MIDIPort",
+  "MimeType",
+  "MimeTypeArray",
+  "MouseEvent",
+  "moveBy",
+  "moveTo",
+  "MutationEvent",
+  "MutationObserver",
+  "MutationRecord",
+  "name",
+  "NamedNodeMap",
+  "NavigationPreloadManager",
+  "navigator",
+  "Navigator",
+  "NavigatorUAData",
+  "NetworkInformation",
+  "Node",
+  "NodeFilter",
+  "NodeIterator",
+  "NodeList",
+  "Notification",
+  "OfflineAudioCompletionEvent",
+  "OfflineAudioContext",
+  "offscreenBuffering",
+  "OffscreenCanvas",
+  "OffscreenCanvasRenderingContext2D",
+  "onabort",
+  "onafterprint",
+  "onanimationend",
+  "onanimationiteration",
+  "onanimationstart",
+  "onappinstalled",
+  "onauxclick",
+  "onbeforeinstallprompt",
+  "onbeforeprint",
+  "onbeforeunload",
+  "onblur",
+  "oncancel",
+  "oncanplay",
+  "oncanplaythrough",
+  "onchange",
+  "onclick",
+  "onclose",
+  "oncontextmenu",
+  "oncuechange",
+  "ondblclick",
+  "ondevicemotion",
+  "ondeviceorientation",
+  "ondeviceorientationabsolute",
+  "ondrag",
+  "ondragend",
+  "ondragenter",
+  "ondragleave",
+  "ondragover",
+  "ondragstart",
+  "ondrop",
+  "ondurationchange",
+  "onemptied",
+  "onended",
+  "onerror",
+  "onfocus",
+  "ongotpointercapture",
+  "onhashchange",
+  "oninput",
+  "oninvalid",
+  "onkeydown",
+  "onkeypress",
+  "onkeyup",
+  "onlanguagechange",
+  "onload",
+  "onloadeddata",
+  "onloadedmetadata",
+  "onloadstart",
+  "onlostpointercapture",
+  "onmessage",
+  "onmessageerror",
+  "onmousedown",
+  "onmouseenter",
+  "onmouseleave",
+  "onmousemove",
+  "onmouseout",
+  "onmouseover",
+  "onmouseup",
+  "onmousewheel",
+  "onoffline",
+  "ononline",
+  "onpagehide",
+  "onpageshow",
+  "onpause",
+  "onplay",
+  "onplaying",
+  "onpointercancel",
+  "onpointerdown",
+  "onpointerenter",
+  "onpointerleave",
+  "onpointermove",
+  "onpointerout",
+  "onpointerover",
+  "onpointerup",
+  "onpopstate",
+  "onprogress",
+  "onratechange",
+  "onrejectionhandled",
+  "onreset",
+  "onresize",
+  "onscroll",
+  "onsearch",
+  "onseeked",
+  "onseeking",
+  "onselect",
+  "onstalled",
+  "onstorage",
+  "onsubmit",
+  "onsuspend",
+  "ontimeupdate",
+  "ontoggle",
+  "ontransitionend",
+  "onunhandledrejection",
+  "onunload",
+  "onvolumechange",
+  "onwaiting",
+  "onwheel",
+  "open",
+  "openDatabase",
+  "opener",
+  "Option",
+  "origin",
+  "OscillatorNode",
+  "outerHeight",
+  "outerWidth",
+  "OverconstrainedError",
+  "PageTransitionEvent",
+  "pageXOffset",
+  "pageYOffset",
+  "PannerNode",
+  "parent",
+  "Path2D",
+  "PaymentAddress",
+  "PaymentRequest",
+  "PaymentRequestUpdateEvent",
+  "PaymentResponse",
+  "performance",
+  "Performance",
+  "PerformanceEntry",
+  "PerformanceLongTaskTiming",
+  "PerformanceMark",
+  "PerformanceMeasure",
+  "PerformanceNavigation",
+  "PerformanceNavigationTiming",
+  "PerformanceObserver",
+  "PerformanceObserverEntryList",
+  "PerformancePaintTiming",
+  "PerformanceResourceTiming",
+  "PerformanceTiming",
+  "PeriodicWave",
+  "Permissions",
+  "PermissionStatus",
+  "personalbar",
+  "PhotoCapabilities",
+  "Plugin",
+  "PluginArray",
+  "PointerEvent",
+  "PopStateEvent",
+  "postMessage",
+  "Presentation",
+  "PresentationAvailability",
+  "PresentationConnection",
+  "PresentationConnectionAvailableEvent",
+  "PresentationConnectionCloseEvent",
+  "PresentationConnectionList",
+  "PresentationReceiver",
+  "PresentationRequest",
+  "print",
+  "ProcessingInstruction",
+  "ProgressEvent",
+  "PromiseRejectionEvent",
+  "prompt",
+  "PushManager",
+  "PushSubscription",
+  "PushSubscriptionOptions",
+  "queueMicrotask",
+  "RadioNodeList",
+  "Range",
+  "ReadableStream",
+  "registerProcessor",
+  "RemotePlayback",
+  "removeEventListener",
+  "reportError",
+  "Request",
+  "requestAnimationFrame",
+  "requestIdleCallback",
+  "resizeBy",
+  "ResizeObserver",
+  "ResizeObserverEntry",
+  "resizeTo",
+  "Response",
+  "RTCCertificate",
+  "RTCDataChannel",
+  "RTCDataChannelEvent",
+  "RTCDtlsTransport",
+  "RTCIceCandidate",
+  "RTCIceGatherer",
+  "RTCIceTransport",
+  "RTCPeerConnection",
+  "RTCPeerConnectionIceEvent",
+  "RTCRtpContributingSource",
+  "RTCRtpReceiver",
+  "RTCRtpSender",
+  "RTCSctpTransport",
+  "RTCSessionDescription",
+  "RTCStatsReport",
+  "RTCTrackEvent",
+  "screen",
+  "Screen",
+  "screenLeft",
+  "ScreenOrientation",
+  "screenTop",
+  "screenX",
+  "screenY",
+  "ScriptProcessorNode",
+  "scroll",
+  "scrollbars",
+  "scrollBy",
+  "scrollTo",
+  "scrollX",
+  "scrollY",
+  "SecurityPolicyViolationEvent",
+  "Selection",
+  "self",
+  "ServiceWorker",
+  "ServiceWorkerContainer",
+  "ServiceWorkerRegistration",
+  "sessionStorage",
+  "setInterval",
+  "setTimeout",
+  "ShadowRoot",
+  "SharedWorker",
+  "SourceBuffer",
+  "SourceBufferList",
+  "speechSynthesis",
+  "SpeechSynthesisEvent",
+  "SpeechSynthesisUtterance",
+  "StaticRange",
+  "status",
+  "statusbar",
+  "StereoPannerNode",
+  "stop",
+  "Storage",
+  "StorageEvent",
+  "StorageManager",
+  "structuredClone",
+  "styleMedia",
+  "StyleSheet",
+  "StyleSheetList",
+  "SubmitEvent",
+  "SubtleCrypto",
+  "SVGAElement",
+  "SVGAngle",
+  "SVGAnimatedAngle",
+  "SVGAnimatedBoolean",
+  "SVGAnimatedEnumeration",
+  "SVGAnimatedInteger",
+  "SVGAnimatedLength",
+  "SVGAnimatedLengthList",
+  "SVGAnimatedNumber",
+  "SVGAnimatedNumberList",
+  "SVGAnimatedPreserveAspectRatio",
+  "SVGAnimatedRect",
+  "SVGAnimatedString",
+  "SVGAnimatedTransformList",
+  "SVGAnimateElement",
+  "SVGAnimateMotionElement",
+  "SVGAnimateTransformElement",
+  "SVGAnimationElement",
+  "SVGCircleElement",
+  "SVGClipPathElement",
+  "SVGComponentTransferFunctionElement",
+  "SVGDefsElement",
+  "SVGDescElement",
+  "SVGDiscardElement",
+  "SVGElement",
+  "SVGEllipseElement",
+  "SVGFEBlendElement",
+  "SVGFEColorMatrixElement",
+  "SVGFEComponentTransferElement",
+  "SVGFECompositeElement",
+  "SVGFEConvolveMatrixElement",
+  "SVGFEDiffuseLightingElement",
+  "SVGFEDisplacementMapElement",
+  "SVGFEDistantLightElement",
+  "SVGFEDropShadowElement",
+  "SVGFEFloodElement",
+  "SVGFEFuncAElement",
+  "SVGFEFuncBElement",
+  "SVGFEFuncGElement",
+  "SVGFEFuncRElement",
+  "SVGFEGaussianBlurElement",
+  "SVGFEImageElement",
+  "SVGFEMergeElement",
+  "SVGFEMergeNodeElement",
+  "SVGFEMorphologyElement",
+  "SVGFEOffsetElement",
+  "SVGFEPointLightElement",
+  "SVGFESpecularLightingElement",
+  "SVGFESpotLightElement",
+  "SVGFETileElement",
+  "SVGFETurbulenceElement",
+  "SVGFilterElement",
+  "SVGForeignObjectElement",
+  "SVGGElement",
+  "SVGGeometryElement",
+  "SVGGradientElement",
+  "SVGGraphicsElement",
+  "SVGImageElement",
+  "SVGLength",
+  "SVGLengthList",
+  "SVGLinearGradientElement",
+  "SVGLineElement",
+  "SVGMarkerElement",
+  "SVGMaskElement",
+  "SVGMatrix",
+  "SVGMetadataElement",
+  "SVGMPathElement",
+  "SVGNumber",
+  "SVGNumberList",
+  "SVGPathElement",
+  "SVGPatternElement",
+  "SVGPoint",
+  "SVGPointList",
+  "SVGPolygonElement",
+  "SVGPolylineElement",
+  "SVGPreserveAspectRatio",
+  "SVGRadialGradientElement",
+  "SVGRect",
+  "SVGRectElement",
+  "SVGScriptElement",
+  "SVGSetElement",
+  "SVGStopElement",
+  "SVGStringList",
+  "SVGStyleElement",
+  "SVGSVGElement",
+  "SVGSwitchElement",
+  "SVGSymbolElement",
+  "SVGTextContentElement",
+  "SVGTextElement",
+  "SVGTextPathElement",
+  "SVGTextPositioningElement",
+  "SVGTitleElement",
+  "SVGTransform",
+  "SVGTransformList",
+  "SVGTSpanElement",
+  "SVGUnitTypes",
+  "SVGUseElement",
+  "SVGViewElement",
+  "TaskAttributionTiming",
+  "Text",
+  "TextDecoder",
+  "TextEncoder",
+  "TextEvent",
+  "TextMetrics",
+  "TextTrack",
+  "TextTrackCue",
+  "TextTrackCueList",
+  "TextTrackList",
+  "TimeRanges",
+  "toolbar",
+  "top",
+  "Touch",
+  "TouchEvent",
+  "TouchList",
+  "TrackEvent",
+  "TransformStream",
+  "TransitionEvent",
+  "TreeWalker",
+  "UIEvent",
+  "URL",
+  "URLSearchParams",
+  "ValidityState",
+  "visualViewport",
+  "VisualViewport",
+  "VTTCue",
+  "WaveShaperNode",
+  "WebAssembly",
+  "WebGL2RenderingContext",
+  "WebGLActiveInfo",
+  "WebGLBuffer",
+  "WebGLContextEvent",
+  "WebGLFramebuffer",
+  "WebGLProgram",
+  "WebGLQuery",
+  "WebGLRenderbuffer",
+  "WebGLRenderingContext",
+  "WebGLSampler",
+  "WebGLShader",
+  "WebGLShaderPrecisionFormat",
+  "WebGLSync",
+  "WebGLTexture",
+  "WebGLTransformFeedback",
+  "WebGLUniformLocation",
+  "WebGLVertexArrayObject",
+  "WebSocket",
+  "WheelEvent",
+  "window",
+  "Window",
+  "Worker",
+  "WritableStream",
+  "XMLDocument",
+  "XMLHttpRequest",
+  "XMLHttpRequestEventTarget",
+  "XMLHttpRequestUpload",
+  "XMLSerializer",
+  "XPathEvaluator",
+  "XPathExpression",
+  "XPathResult",
+  "XSLTProcessor"
 ];
+  
\ No newline at end of file
diff --git a/packages/ui-bindings/vue/README.md b/packages/ui-bindings/vue/README.md
index 190a4953c..f3307003d 100644
--- a/packages/ui-bindings/vue/README.md
+++ b/packages/ui-bindings/vue/README.md
@@ -3,5 +3,108 @@
 ## Usage
 
 ```bash
-npm i @qiankunjs/vue-binding
+npm i @qiankunjs/vue
 ```
+
+## MicroApp Component
+Load (or unload) a sub-application directly through the `<MicroApp />` component, which provides capabilities related to loading and error capturing:
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+
+</script>
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" />
+</template>
+```
+When enabling the sub-application loading animation or error capturing capabilities, an additional style class `wrapperClassName` is accepted by the sub-application. The rendered result is as follows:
+
+```vue
+<div :class="wrapperClassName">
+  <MicroAppLoader :loading="loading" />
+  <ErrorBoundary :error="e" />
+  <MicroApp :class="className" />
+</div>
+```
+
+### Loading Animation
+After enabling this feature, a loading animation will automatically be displayed while the sub-application is loading. When the sub-application finishes mounting and becomes in the MOUNTED state, the loading state ends, and the sub-application content is displayed.
+
+Simply pass `autoSetLoading` as a parameter:
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+
+</script>
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" autoSetLoading />
+</template>
+```
+#### Custom Loading Animation
+If you wish to override the default loading animation style, you can customize the loading component by using the loader slot as the sub-application's loading animation.
+
+```vue
+<script setup>
+import CustomLoader from '@/components/CustomLoader.vue';
+import { MicroApp } from '@qiankunjs/vue';
+
+</script>
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" >
+     <template #loader="{ loading }">
+       <custom-loader :loading="loading" />
+     </template>
+  </micro-app>
+</template>
+```
+Here, `loading` is a boolean type parameter; when true, it indicates that it is still in the loading state, and when false, it indicates that the loading state has ended.
+
+### Error Capturing
+After enabling this feature, when the sub-application encounters an exception while loading, an error message will automatically be displayed. You can pass the `autoCaptureError` property to the sub-application to enable error capturing capabilities:
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+
+</script>
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" autoCaptureError />
+</template>
+```
+#### Custom Error Capturing
+If you wish to override the default error capturing component style, you can customize the error capturing component for the sub-application using the errorBoundary slot:
+
+```vue
+<script setup>
+import CustomErrorBoundary from '@/components/CustomErrorBoundary.vue';
+import { MicroApp } from '@qiankunjs/vue';
+
+</script>
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" >
+     <template #error-boundary="{ error }">
+       <custom-error-boundary :error="error" />
+     </template>
+  </micro-app>
+</template>
+```
+
+### Component Properties
+
+| Property           | Required | Description                                                                   | Type      | Default Value |
+| ------------------ | -------- | ----------------------------------------------------------------------------- | --------- | ------------- |
+| `name`             | Yes      | The name of the micro-application                                             | `string`  |               |
+| `entry`            | Yes      | The HTML address of the micro-application                                     | `string`  |               |
+| `autoSetLoading`   | No       | Automatically set the loading status of the micro-application                 | `boolean` | `false`       |
+| `autoCaptureError` | No       | Automatically set error capturing for the micro-application                   | `boolean` | `false`       |
+| `className`        | No       | The style class for the micro-application                                     | `string`  | `undefined`   |
+| `wrapperClassName` | No       | The style class wrapping the micro-application's loading and error components | `string`  | `undefined`   |
+
+### Component Slots
+
+| Slot            | Description          |
+| --------------- | -------------------- |
+| `loader`        | Loading state slot   |
+| `errorBoundary` | Error capturing slot |
\ No newline at end of file
diff --git a/packages/ui-bindings/vue/README.zh-CN.md b/packages/ui-bindings/vue/README.zh-CN.md
new file mode 100644
index 000000000..248d268f5
--- /dev/null
+++ b/packages/ui-bindings/vue/README.zh-CN.md
@@ -0,0 +1,116 @@
+# qiankun vue binding
+
+## Usage
+
+```bash
+npm i @qiankunjs/vue
+```
+
+
+## MicroApp 组件
+直接通过 <MicroApp /> 组件加载（或卸载）子应用，该组件提供了 loading 以及错误捕获相关的能力：
+
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+
+</script>
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" />
+</template>
+```
+当启用子应用加载动画或错误捕获能力时，子应用接受一个额外的样式类 wrapperClassName，渲染的结果如下所示：
+
+```vue
+<div :class="wrapperClassName">
+  <MicroAppLoader :loading="loading" />
+  <ErrorBoundary :error="e" />
+  <MicroApp :class="className" />
+</div>
+```
+
+### 加载动画
+启用此能力后，当子应用正在加载时，会自动显示加载动画。当子应用挂载完成变成 MOUNTED 状态时，加载状态结束，显示子应用内容。
+
+直接将 autoSetLoading 作为参数传入即可：
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+
+</script>
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" autoSetLoading />
+</template>
+```
+#### 自定义加载动画
+如果您希望覆盖默认的加载动画样式时，可以通过 loader slot 来自定义加载组件 loader 作为子应用的加载动画。
+
+```vue
+<script setup>
+import CustomLoader from '@/components/CustomLoader.vue';
+import { MicroApp } from '@qiankunjs/vue';
+
+</script>
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" >
+     <template #loader="{ loading }">
+       <custom-loader :loading="loading">
+     </template>
+  </micro-app>
+</template>
+```
+其中，loading 为 boolean 类型参数，为 true 时表示仍在加载状态，为 false 时表示加载状态已结束。
+
+### 错误捕获
+启用此能力后，当子应用加载出现异常时，会自动显示错误信息。可以向子应用传入 autoCaptureError 属性以开启子应用错误捕获能力：
+
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+
+</script>
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" autoCaptureError />
+</template>
+```
+#### 自定义错误捕获
+如果您希望覆盖默认的错误捕获组件样式时，可以通过  errorBoundary slot 来自定义子应用的错误捕获组件：
+```vue
+<script setup>
+import CustomErrorBoundary from '@/components/CustomErrorBoundary.vue';
+import { MicroApp } from '@qiankunjs/vue';
+
+</script>
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" >
+     <template #error-boundary="{ error }">
+       <custom-error-boundary :error="error">
+     </template>
+  </micro-app>
+</template>
+```
+
+
+### 组件属性
+
+| 属性               | 必填 | 说明                                                                                   | 类型      | 默认值      |
+| ------------------ | ---- | -------------------------------------------------------------------------------------- | --------- | ----------- |
+| `name`             | 是   | 微应用的名称                                                                           | `string`  |
+| `entry`            | 是   | 微应用的 HTML 地址                                                                     | `string`  |
+| `autoSetLoading`   | 否   | 自动设置微应用的加载状态                                                               | `boolean` | `false`     |
+| `autoCaptureError` | 否   | 自动设置微应用的错误捕获                                                               | `boolean` | `false`     |
+| `className`        | 否   | 微应用的样式类                                                                         | `string`  | `undefined` |
+| `wrapperClassName` | 否   | 包裹微应用加载组件、错误捕获组件和微应用的样式类，仅在启用加载组件或错误捕获组件时有效 | `string`  | `undefined` |
+
+
+
+### 组件插槽
+
+| 插槽            | 说明         |
+| --------------- | ------------ |
+| `loader`        | 加载状态插槽 |
+| `errorBoundary` | 错误捕获插槽 |
+
diff --git a/packages/ui-bindings/vue/package.json b/packages/ui-bindings/vue/package.json
index 97d4e7221..9aad42022 100644
--- a/packages/ui-bindings/vue/package.json
+++ b/packages/ui-bindings/vue/package.json
@@ -14,17 +14,25 @@
   "author": "linghaoSu",
   "license": "MIT",
   "dependencies": {
-    "lodash": "^4.17.11"
+    "lodash": "^4.17.11",
+    "vue-demi": "^0.14.6"
   },
   "devDependencies": {
     "eslint-plugin-vue": "^9.18.1",
     "qiankun": "workspace:^",
-    "vue": "^3.3.7",
+    "vue": "^3.3.9",
+    "vue2": "npm:vue@2.6.11",
     "@qiankunjs/ui-shared": "workspace:^"
   },
   "peerDependencies": {
     "qiankun": "3.0.0-rc.9",
-    "vue": "^3.3.7"
+    "@vue/composition-api": "^1.7.2",
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
diff --git a/packages/ui-bindings/vue/src/ErrorBoundary.ts b/packages/ui-bindings/vue/src/ErrorBoundary.ts
index adeeddd68..9c572cfbe 100644
--- a/packages/ui-bindings/vue/src/ErrorBoundary.ts
+++ b/packages/ui-bindings/vue/src/ErrorBoundary.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h } from 'vue-demi';
 
 export default defineComponent({
   props: {
@@ -7,7 +7,7 @@ export default defineComponent({
       default: undefined,
     },
   },
-  setup(props) {
-    return () => h('div', [props.error?.message]);
-  },
+  render() {
+    return h('div', this.error?.message);
+  }
 });
diff --git a/packages/ui-bindings/vue/src/MicroApp.ts b/packages/ui-bindings/vue/src/MicroApp.ts
index 202655040..2e5d8b8e3 100644
--- a/packages/ui-bindings/vue/src/MicroApp.ts
+++ b/packages/ui-bindings/vue/src/MicroApp.ts
@@ -1,5 +1,5 @@
-import type { PropType } from 'vue';
-import { computed, defineComponent, h, onMounted, reactive, ref, toRefs, watch } from 'vue';
+import type { PropType } from 'vue-demi';
+import { computed, defineComponent, h, onMounted, reactive, ref, toRefs, watch, isVue2 } from 'vue-demi';
 import type { AppConfiguration, LifeCycles } from 'qiankun';
 import type { MicroAppType } from '@qiankunjs/ui-shared';
 import { mountMicroApp, omitSharedProps, unmountMicroApp, updateMicroApp } from '@qiankunjs/ui-shared';
@@ -8,6 +8,7 @@ import MicroAppLoader from './MicroAppLoader';
 import ErrorBoundary from './ErrorBoundary';
 
 export const MicroApp = defineComponent({
+  name: 'MicroApp',
   props: {
     name: {
       type: String,
@@ -36,12 +37,14 @@ export const MicroApp = defineComponent({
     },
     wrapperClassName: {
       type: String,
+      default: undefined,
     },
     className: {
       type: String,
+      default: undefined,
     },
   },
-  setup(props, { slots, expose }) {
+  setup(props, { slots }) {
     const originProps = props;
     const { name, wrapperClassName, className, ...propsFromParams } = toRefs(originProps);
 
@@ -72,16 +75,20 @@ export const MicroApp = defineComponent({
       }
     };
 
-    expose({
-      microApp: microAppRef,
-    });
+
+    const rootRef = ref<HTMLDivElement | null>(null);
 
     onMounted(() => {
+      console.log(rootRef.value);
+
+      console.log(containerRef.value);
+
       watch(
         name,
         () => {
           const microApp = microAppRef.value;
 
+
           if (microApp) {
             microApp._unmounting = true;
 
@@ -137,40 +144,65 @@ export const MicroApp = defineComponent({
       return className.value ? `${className.value} qiankun-micro-app-container` : 'qiankun-micro-app-container';
     });
 
-    return () =>
-      reactivePropsFromParams.value.autoSetLoading ||
-      reactivePropsFromParams.value.autoCaptureError ||
-      slots.loader ||
-      slots.errorBoundary
-        ? h(
-            'div',
-            {
-              class: microAppWrapperClassName.value,
-            },
-            [
-              slots.loader
-                ? slots.loader(loading.value)
-                : reactivePropsFromParams.value.autoSetLoading &&
-                  h(MicroAppLoader, {
-                    loading: loading.value,
-                  }),
-              error.value
-                ? slots.errorBoundary
-                  ? slots.errorBoundary(error.value)
-                  : reactivePropsFromParams.value.autoCaptureError &&
-                    h(ErrorBoundary, {
-                      error: error.value,
-                    })
-                : null,
-              h('div', {
-                class: microAppClassName.value,
-                ref: containerRef,
-              }),
-            ],
-          )
-        : h('div', {
-            class: microAppClassName.value,
-            ref: containerRef,
-          });
+    return {
+      loading,
+      error,
+      containerRef,
+      microAppRef,
+      microAppWrapperClassName,
+      microAppClassName,
+      rootRef,
+      reactivePropsFromParams,
+      microApp: microAppRef,
+    };
   },
+
+  render() {
+    return this.reactivePropsFromParams.autoSetLoading ||
+    this.reactivePropsFromParams.autoCaptureError ||
+    this.$slots.loader ||
+    this.$slots.errorBoundary
+      ? h(
+          'div',
+          {
+            class: this.microAppWrapperClassName,
+          },
+          [
+            this.$slots.loader
+              ? (typeof this.$slots.loader === 'function' ? this.$slots.loader(this.loading): this.$slots.loader)
+              : this.reactivePropsFromParams.autoSetLoading &&
+                h(MicroAppLoader, {
+                  ...(isVue2 ? {
+                    props: {
+                      loading: this.loading,
+                      },
+                    } : {
+                        loading: this.loading,
+                    })
+                }),
+            this.error
+              ? this.$slots.errorBoundary
+                ? (typeof this.$slots.errorBoundary === 'function' ? this.$slots.errorBoundary(this.error) : this.$slots.errorBoundary)
+                : this.reactivePropsFromParams.autoCaptureError &&
+                  h(ErrorBoundary, {
+                    ...(isVue2 ? {
+                      props: {
+                        error: this.error,
+                      }
+                    } : {
+                      error: this.error,
+                    })
+                  })
+              : null,
+            h('div', {
+              class: this.microAppClassName,
+              ref: 'containerRef',
+            }),
+          ],
+        )
+      : h('div', {
+          class: this.microAppClassName,
+          ref: 'containerRef',
+        });
+  }
 });
diff --git a/packages/ui-bindings/vue/src/MicroAppLoader.ts b/packages/ui-bindings/vue/src/MicroAppLoader.ts
index a1f9c68ef..19ed90312 100644
--- a/packages/ui-bindings/vue/src/MicroAppLoader.ts
+++ b/packages/ui-bindings/vue/src/MicroAppLoader.ts
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, h } from 'vue-demi';
 
 export default defineComponent({
   props: {
@@ -7,7 +7,8 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(props) {
-    return () => (props.loading ? 'loading...' : null);
-  },
+
+  render() {
+    return h('div', this.loading ? 'loading...' : '');
+  }
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f4ae6cd44..da2a87c7c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -178,9 +178,15 @@ importers:
 
   packages/ui-bindings/vue:
     dependencies:
+      '@vue/composition-api':
+        specifier: ^1.7.2
+        version: 1.7.2(vue@3.3.9)
       lodash:
         specifier: ^4.17.11
         version: 4.17.21
+      vue-demi:
+        specifier: ^0.14.6
+        version: 0.14.6(@vue/composition-api@1.7.2)(vue@3.3.9)
     devDependencies:
       '@qiankunjs/ui-shared':
         specifier: workspace:^
@@ -192,8 +198,11 @@ importers:
         specifier: workspace:^
         version: link:../../qiankun
       vue:
-        specifier: ^3.3.7
-        version: 3.3.7(typescript@5.2.2)
+        specifier: ^3.3.9
+        version: 3.3.9(typescript@5.2.2)
+      vue2:
+        specifier: npm:vue@2.6.11
+        version: /vue@2.6.11
 
   packages/webpack-plugin:
     dependencies:
@@ -289,7 +298,7 @@ packages:
       '@babel/helper-compilation-targets': 7.22.15
       '@babel/helper-module-transforms': 7.22.20(@babel/core@7.21.0)
       '@babel/helpers': 7.22.15
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.4
       '@babel/template': 7.22.15
       '@babel/traverse': 7.22.20
       '@babel/types': 7.22.19
@@ -312,7 +321,7 @@ packages:
       '@babel/helper-compilation-targets': 7.22.15
       '@babel/helper-module-transforms': 7.22.20(@babel/core@7.22.20)
       '@babel/helpers': 7.22.15
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.4
       '@babel/template': 7.22.15
       '@babel/traverse': 7.22.20
       '@babel/types': 7.22.19
@@ -444,14 +453,14 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.22.5
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.19
     dev: true
 
   /@babel/helper-hoist-variables@7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.19
     dev: true
 
   /@babel/helper-member-expression-to-functions@7.22.15:
@@ -550,23 +559,16 @@ packages:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.19
     dev: true
 
   /@babel/helper-string-parser@7.22.5:
     resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-validator-identifier@7.22.20:
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
     engines: {node: '>=6.9.0'}
-    dev: true
-
-  /@babel/helper-validator-identifier@7.22.5:
-    resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
-    engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-validator-option@7.22.15:
     resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==}
@@ -597,7 +599,7 @@ packages:
     resolution: {integrity: sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-validator-identifier': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.20
       chalk: 2.4.2
       js-tokens: 4.0.0
     dev: true
@@ -619,21 +621,12 @@ packages:
       '@babel/types': 7.22.10
     dev: true
 
-  /@babel/parser@7.22.16:
-    resolution: {integrity: sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.22.19
-    dev: true
-
-  /@babel/parser@7.23.0:
-    resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==}
+  /@babel/parser@7.23.4:
+    resolution: {integrity: sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
       '@babel/types': 7.22.19
-    dev: true
 
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.5(@babel/core@7.22.20):
     resolution: {integrity: sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==}
@@ -1689,7 +1682,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.22.13
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.4
       '@babel/types': 7.22.19
     dev: true
 
@@ -1698,8 +1691,8 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.22.10
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/parser': 7.23.4
+      '@babel/types': 7.22.19
     dev: true
 
   /@babel/traverse@7.22.10:
@@ -1712,7 +1705,7 @@ packages:
       '@babel/helper-function-name': 7.22.5
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.22.16
+      '@babel/parser': 7.23.4
       '@babel/types': 7.22.19
       debug: 4.3.4
       globals: 11.12.0
@@ -1730,7 +1723,7 @@ packages:
       '@babel/helper-function-name': 7.22.5
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.4
       '@babel/types': 7.22.19
       debug: 4.3.4
       globals: 11.12.0
@@ -1743,7 +1736,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-string-parser': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
     dev: true
 
@@ -1754,7 +1747,6 @@ packages:
       '@babel/helper-string-parser': 7.22.5
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
-    dev: true
 
   /@bloomberg/record-tuple-polyfill@0.0.4:
     resolution: {integrity: sha512-h0OYmPR3A5Dfbetra/GzxBAzQk8sH7LhRkRUTdagX6nrtlUgJGYCTv4bBK33jsTQw9HDd8PE2x1Ma+iRKEDUsw==}
@@ -2755,7 +2747,6 @@ packages:
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.19:
     resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
@@ -3295,7 +3286,7 @@ packages:
   /@types/babel__core@7.20.2:
     resolution: {integrity: sha512-pNpr1T1xLUc2l3xJKuPtsEky3ybxN3m4fJkknfIpTCTfIZCDW57oAg+EfCgIIp2rvCe0Wn++/FfodDS4YXxBwA==}
     dependencies:
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.4
       '@babel/types': 7.22.19
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.2
@@ -3311,7 +3302,7 @@ packages:
   /@types/babel__template@7.4.2:
     resolution: {integrity: sha512-/AVzPICMhMOMYoSx9MoKpGDKdBRsIXMNByh1PXSZoa+v6ZoLa8xxtsT/uLQ/NJm0XVAWl/BvId4MlDeXJaeIZQ==}
     dependencies:
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.4
       '@babel/types': 7.22.19
     dev: true
 
@@ -4503,88 +4494,86 @@ packages:
       pretty-format: 29.6.2
     dev: true
 
-  /@vue/compiler-core@3.3.7:
-    resolution: {integrity: sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==}
+  /@vue/compiler-core@3.3.9:
+    resolution: {integrity: sha512-+/Lf68Vr/nFBA6ol4xOtJrW+BQWv3QWKfRwGSm70jtXwfhZNF4R/eRgyVJYoxFRhdCTk/F6g99BP0ffPgZihfQ==}
     dependencies:
-      '@babel/parser': 7.23.0
-      '@vue/shared': 3.3.7
+      '@babel/parser': 7.23.4
+      '@vue/shared': 3.3.9
       estree-walker: 2.0.2
       source-map-js: 1.0.2
-    dev: true
 
-  /@vue/compiler-dom@3.3.7:
-    resolution: {integrity: sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==}
+  /@vue/compiler-dom@3.3.9:
+    resolution: {integrity: sha512-nfWubTtLXuT4iBeDSZ5J3m218MjOy42Vp2pmKVuBKo2/BLcrFUX8nCSr/bKRFiJ32R8qbdnnnBgRn9AdU5v0Sg==}
     dependencies:
-      '@vue/compiler-core': 3.3.7
-      '@vue/shared': 3.3.7
-    dev: true
+      '@vue/compiler-core': 3.3.9
+      '@vue/shared': 3.3.9
 
-  /@vue/compiler-sfc@3.3.7:
-    resolution: {integrity: sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==}
+  /@vue/compiler-sfc@3.3.9:
+    resolution: {integrity: sha512-wy0CNc8z4ihoDzjASCOCsQuzW0A/HP27+0MDSSICMjVIFzk/rFViezkR3dzH+miS2NDEz8ywMdbjO5ylhOLI2A==}
     dependencies:
-      '@babel/parser': 7.23.0
-      '@vue/compiler-core': 3.3.7
-      '@vue/compiler-dom': 3.3.7
-      '@vue/compiler-ssr': 3.3.7
-      '@vue/reactivity-transform': 3.3.7
-      '@vue/shared': 3.3.7
+      '@babel/parser': 7.23.4
+      '@vue/compiler-core': 3.3.9
+      '@vue/compiler-dom': 3.3.9
+      '@vue/compiler-ssr': 3.3.9
+      '@vue/reactivity-transform': 3.3.9
+      '@vue/shared': 3.3.9
       estree-walker: 2.0.2
       magic-string: 0.30.5
       postcss: 8.4.31
       source-map-js: 1.0.2
-    dev: true
 
-  /@vue/compiler-ssr@3.3.7:
-    resolution: {integrity: sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==}
+  /@vue/compiler-ssr@3.3.9:
+    resolution: {integrity: sha512-NO5oobAw78R0G4SODY5A502MGnDNiDjf6qvhn7zD7TJGc8XDeIEw4fg6JU705jZ/YhuokBKz0A5a/FL/XZU73g==}
     dependencies:
-      '@vue/compiler-dom': 3.3.7
-      '@vue/shared': 3.3.7
-    dev: true
+      '@vue/compiler-dom': 3.3.9
+      '@vue/shared': 3.3.9
+
+  /@vue/composition-api@1.7.2(vue@3.3.9):
+    resolution: {integrity: sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==}
+    peerDependencies:
+      vue: '>= 2.5 < 2.7'
+    dependencies:
+      vue: 3.3.9(typescript@5.2.2)
+    dev: false
 
-  /@vue/reactivity-transform@3.3.7:
-    resolution: {integrity: sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==}
+  /@vue/reactivity-transform@3.3.9:
+    resolution: {integrity: sha512-HnUFm7Ry6dFa4Lp63DAxTixUp8opMtQr6RxQCpDI1vlh12rkGIeYqMvJtK+IKyEfEOa2I9oCkD1mmsPdaGpdVg==}
     dependencies:
-      '@babel/parser': 7.23.0
-      '@vue/compiler-core': 3.3.7
-      '@vue/shared': 3.3.7
+      '@babel/parser': 7.23.4
+      '@vue/compiler-core': 3.3.9
+      '@vue/shared': 3.3.9
       estree-walker: 2.0.2
       magic-string: 0.30.5
-    dev: true
 
-  /@vue/reactivity@3.3.7:
-    resolution: {integrity: sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==}
+  /@vue/reactivity@3.3.9:
+    resolution: {integrity: sha512-VmpIqlNp+aYDg2X0xQhJqHx9YguOmz2UxuUJDckBdQCNkipJvfk9yA75woLWElCa0Jtyec3lAAt49GO0izsphw==}
     dependencies:
-      '@vue/shared': 3.3.7
-    dev: true
+      '@vue/shared': 3.3.9
 
-  /@vue/runtime-core@3.3.7:
-    resolution: {integrity: sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==}
+  /@vue/runtime-core@3.3.9:
+    resolution: {integrity: sha512-xxaG9KvPm3GTRuM4ZyU8Tc+pMVzcu6eeoSRQJ9IE7NmCcClW6z4B3Ij6L4EDl80sxe/arTtQ6YmgiO4UZqRc+w==}
     dependencies:
-      '@vue/reactivity': 3.3.7
-      '@vue/shared': 3.3.7
-    dev: true
+      '@vue/reactivity': 3.3.9
+      '@vue/shared': 3.3.9
 
-  /@vue/runtime-dom@3.3.7:
-    resolution: {integrity: sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==}
+  /@vue/runtime-dom@3.3.9:
+    resolution: {integrity: sha512-e7LIfcxYSWbV6BK1wQv9qJyxprC75EvSqF/kQKe6bdZEDNValzeRXEVgiX7AHI6hZ59HA4h7WT5CGvm69vzJTQ==}
     dependencies:
-      '@vue/runtime-core': 3.3.7
-      '@vue/shared': 3.3.7
+      '@vue/runtime-core': 3.3.9
+      '@vue/shared': 3.3.9
       csstype: 3.1.2
-    dev: true
 
-  /@vue/server-renderer@3.3.7(vue@3.3.7):
-    resolution: {integrity: sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==}
+  /@vue/server-renderer@3.3.9(vue@3.3.9):
+    resolution: {integrity: sha512-w0zT/s5l3Oa3ZjtLW88eO4uV6AQFqU8X5GOgzq7SkQQu6vVr+8tfm+OI2kDBplS/W/XgCBuFXiPw6T5EdwXP0A==}
     peerDependencies:
-      vue: 3.3.7
+      vue: 3.3.9
     dependencies:
-      '@vue/compiler-ssr': 3.3.7
-      '@vue/shared': 3.3.7
-      vue: 3.3.7(typescript@5.2.2)
-    dev: true
+      '@vue/compiler-ssr': 3.3.9
+      '@vue/shared': 3.3.9
+      vue: 3.3.9(typescript@5.2.2)
 
-  /@vue/shared@3.3.7:
-    resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==}
-    dev: true
+  /@vue/shared@3.3.9:
+    resolution: {integrity: sha512-ZE0VTIR0LmYgeyhurPTpy4KzKsuDyQbMSdM49eKkMnT5X4VfFBLysMzjIZhLEFQYjjOVVfbvUDHckwjDFiO2eA==}
 
   /@webassemblyjs/ast@1.11.6:
     resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==}
@@ -6365,7 +6354,6 @@ packages:
 
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: true
 
   /csv-generate@3.4.3:
     resolution: {integrity: sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==}
@@ -7503,7 +7491,6 @@ packages:
 
   /estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-    dev: true
 
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -9565,7 +9552,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       '@babel/core': 7.22.20
-      '@babel/parser': 7.23.0
+      '@babel/parser': 7.23.4
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.1
@@ -10386,7 +10373,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /make-dir@1.3.0:
     resolution: {integrity: sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==}
@@ -11153,7 +11139,6 @@ packages:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: true
 
   /natural-compare-lite@1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -11889,7 +11874,6 @@ packages:
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: true
 
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -12432,7 +12416,6 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /preferred-pm@3.0.3:
     resolution: {integrity: sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ==}
@@ -13190,7 +13173,7 @@ packages:
   /regenerator-transform@0.15.2:
     resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
     dependencies:
-      '@babel/runtime': 7.22.10
+      '@babel/runtime': 7.23.2
     dev: true
 
   /regexp.prototype.flags@1.5.0:
@@ -13208,7 +13191,7 @@ packages:
     dependencies:
       '@babel/regjsgen': 0.8.0
       regenerate: 1.4.2
-      regenerate-unicode-properties: 10.1.0
+      regenerate-unicode-properties: 10.1.1
       regjsparser: 0.9.1
       unicode-match-property-ecmascript: 2.0.0
       unicode-match-property-value-ecmascript: 2.1.0
@@ -13891,7 +13874,6 @@ packages:
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /source-map-resolve@0.6.0:
     resolution: {integrity: sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==}
@@ -14706,7 +14688,6 @@ packages:
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
-    dev: true
 
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -14941,7 +14922,6 @@ packages:
     resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
     engines: {node: '>=14.17'}
     hasBin: true
-    dev: true
 
   /typical@4.0.0:
     resolution: {integrity: sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==}
@@ -15488,6 +15468,22 @@ packages:
     resolution: {integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==}
     dev: true
 
+  /vue-demi@0.14.6(@vue/composition-api@1.7.2)(vue@3.3.9):
+    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      '@vue/composition-api': 1.7.2(vue@3.3.9)
+      vue: 3.3.9(typescript@5.2.2)
+    dev: false
+
   /vue-eslint-parser@9.3.2(eslint@8.53.0):
     resolution: {integrity: sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -15506,21 +15502,24 @@ packages:
       - supports-color
     dev: true
 
-  /vue@3.3.7(typescript@5.2.2):
-    resolution: {integrity: sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==}
+  /vue@2.6.11:
+    resolution: {integrity: sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==}
+    dev: true
+
+  /vue@3.3.9(typescript@5.2.2):
+    resolution: {integrity: sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.3.7
-      '@vue/compiler-sfc': 3.3.7
-      '@vue/runtime-dom': 3.3.7
-      '@vue/server-renderer': 3.3.7(vue@3.3.7)
-      '@vue/shared': 3.3.7
+      '@vue/compiler-dom': 3.3.9
+      '@vue/compiler-sfc': 3.3.9
+      '@vue/runtime-dom': 3.3.9
+      '@vue/server-renderer': 3.3.9(vue@3.3.9)
+      '@vue/shared': 3.3.9
       typescript: 5.2.2
-    dev: true
 
   /walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}