1---
2title: mount() Returns Component Instance, Not App Instance
3impact: MEDIUM
4impactDescription: Using mount() return value for app configuration silently fails
5type: capability
6tags: [vue3, createApp, mount, api]
7---
8 
9# mount() Returns Component Instance, Not App Instance
10 
11**Impact: MEDIUM** - The `.mount()` method returns the root component instance, not the application instance. Attempting to chain app configuration methods after mount() will fail or produce unexpected behavior.
12 
13This is a subtle API detail that catches developers who assume mount() returns the app for continued chaining.
14 
15## Task Checklist
16 
17- [ ] Never chain app configuration methods after mount()
18- [ ] If you need both instances, store them separately
19- [ ] Use the component instance for accessing root component state or methods
20- [ ] Use the app instance for configuration, plugins, and global registration
21 
22**Incorrect:**
23```javascript
24import { createApp } from 'vue'
25import App from './App.vue'
26 
27// WRONG: Assuming mount returns app instance
28const app = createApp(App).mount('#app')
29 
30// This fails! app is actually the root component instance
31app.use(router)  // TypeError: app.use is not a function
32app.config.errorHandler = fn  // app.config is undefined
33```
34 
35```javascript
36// WRONG: Trying to save both in one line
37const { app, component } = createApp(App).mount('#app')  // Doesn't work this way
38```
39 
40**Correct:**
41```javascript
42import { createApp } from 'vue'
43import App from './App.vue'
44 
45// Store app instance separately
46const app = createApp(App)
47 
48// Configure the app
49app.use(router)
50app.config.errorHandler = (err) => console.error(err)
51 
52// Store component instance if needed
53const rootComponent = app.mount('#app')
54 
55// Now you have access to both:
56// - app: the application instance (for config, plugins)
57// - rootComponent: the root component instance (for state, methods)
58```
59 
60```javascript
61// If you only need the app configured and mounted (most common case):
62createApp(App)
63  .use(router)
64  .use(pinia)
65  .mount('#app')  // Return value (component instance) discarded - that's fine
66```
67 
68## When You Need the Root Component Instance
69 
70```javascript
71const app = createApp(App)
72const vm = app.mount('#app')
73 
74// Access root component's exposed state/methods
75console.log(vm.someExposedProperty)
76vm.someExposedMethod()
77 
78// In Vue 3 with <script setup>, use defineExpose to expose:
79// <script setup>
80// import { ref } from 'vue'
81// const count = ref(0)
82// defineExpose({ count })
83// </script>
84```
85 
86## Reference
87- [Vue.js - Mounting the App](https://vuejs.org/guide/essentials/application.html#mounting-the-app)
88- [Vue.js Application API - mount()](https://vuejs.org/api/application.html#app-mount)
89