diff --git a/packages/runtime-core/__tests__/apiCreateApp.spec.ts b/packages/runtime-core/__tests__/apiCreateApp.spec.ts index e5e9a5906..3fb5bb175 100644 --- a/packages/runtime-core/__tests__/apiCreateApp.spec.ts +++ b/packages/runtime-core/__tests__/apiCreateApp.spec.ts @@ -30,6 +30,11 @@ describe('api: createApp', () => { const root1 = nodeOps.createElement('div') createApp(Comp).mount(root1) expect(serializeInner(root1)).toBe(`0`) + //#5571 mount multiple apps to the same host element + createApp(Comp).mount(root1) + expect( + `There is already an app instance mounted on the host container` + ).toHaveBeenWarned() // mount with props const root2 = nodeOps.createElement('div') diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts index 6b2093141..b0c8a3f2b 100644 --- a/packages/runtime-core/src/apiCreateApp.ts +++ b/packages/runtime-core/src/apiCreateApp.ts @@ -284,6 +284,14 @@ export function createAppAPI( isSVG?: boolean ): any { if (!isMounted) { + // #5571 + if (__DEV__ && (rootContainer as any).__vue_app__) { + warn( + `There is already an app instance mounted on the host container.\n` + + ` If you want to mount another app on the same host container,` + + ` you need to unmount the previous app by calling \`app.unmount()\` first.` + ) + } const vnode = createVNode( rootComponent as ConcreteComponent, rootProps