In Vue 3, what does app.mount() return, and why does createApp(App).mount('#app').use(plugin) fail?

## Two objects, two roles A Vue 3 application has two distinct objects that are easy to confuse: - the **application instance**, returned by `createApp(rootComponent, rootProps?)`. It holds app-wide configuration and registrations and renders nothing by itself; - the **root component instance**, created when the app is mounted. It is the live instance of the root component, the top of the component tree. `createApp` builds the first. `mount` creates the second and returns it. ## What mount does 1. It resolves the container: a DOM element is used as-is, and a selector string is passed to `document.querySelector`, so the **first** matching element wins. If nothing matches, development builds warn *Failed to mount app: mount target selector "#app" returned null.* and nothing is mounted. 2. It creates the root component's virtual node with the root props and attaches the app's context, which carries all configuration and registrations made so far. 3. It renders the tree into the container, running `setup` and the mount lifecycle of every component. 4. It returns the root component instance. ## Why the chain breaks | Method | Returns | Chainable with app methods? | |---|---|---| | `app.use(plugin)` | the app | yes | | `app.component(name, comp)` | the app | yes | | `app.provide(key, value)` | the app | yes | | `app.mount('#app')` | the root component instance | no | So `createApp(App).mount('#app').use(plugin)` evaluates `mount` first and then calls `use` on the component instance, which has no `use` method: a runtime TypeError. Even if it did not throw, the order would be wrong, because the first render ran before the plugin registered its components, directives or provides. The Vue guide's rule is direct: call `mount()` after all app configuration and asset registration is done. The correct shape keeps the app in a variable or puts mount last: ```ts const app = createApp(App) app.use(i18n) app.component('BaseIcon', BaseIcon) app.mount('#app') ``` ## Mount once per app An app instance can be mounted a single time. A second `mount()` call on the same app renders nothing and warns in development that the app has already been mounted, suggesting a factory function such as `const createMyApp = () => createApp(App)` if you need fresh instances. One side effect is easy to miss: the DOM layer empties the target container before that check runs, so a stray second mount can blank an element. Mounting a different app into a container that already hosts one also warns, asking you to `unmount()` the previous app first. ## What the returned instance is good for The return value is occasionally useful in plain-script integrations and debugging: it gives access to `$el` and to whatever the root exposes. A `<script setup>` root is closed by default, so its internal bindings are not reachable through that value unless the component exposes them explicitly. Application code should not depend on it heavily; state that outside code needs is better shared through a store or a provided service. ## What TypeScript tells you The types make the distinction visible before runtime. `createApp` returns an `App`, whose `use`, `component`, `directive`, `provide` and `mixin` methods are declared to return `this`, which is what makes chaining type-check. `mount` is declared to return a `ComponentPublicInstance`, which has no `use` member, so in a TypeScript project `createApp(App).mount('#app').use(i18n)` is a compile error long before it is a runtime TypeError. In plain JavaScript the mistake survives until the page loads, which is why it is a classic screening question: it tests whether the candidate knows two different objects are involved. A useful habit is to keep the app in a named variable, `const app = createApp(App)`, and put each configuration step on its own line. The entry file then reads as an ordered checklist, and a plugin added later cannot accidentally land after the `mount()` call. ## Common mistakes - Chaining app methods after `mount()`. - Registering a plugin or global component after mount and expecting the first render to have used it. - Passing a selector that matches several elements and expecting all of them to be mounted. - Calling `mount()` again to re-render; Vue re-renders reactively on its own, and a remount needs a new app. - Mounting before the container exists, for example from a script in the page head that runs before the body is parsed.