1---
2title: Configure Vue App Before Calling mount()
3impact: HIGH
4impactDescription: App configurations after mount() are silently ignored, causing missing plugins and handlers
5type: capability
6tags: [vue3, createApp, mount, configuration, setup]
7---
8 
9# Configure Vue App Before Calling mount()
10 
11**Impact: HIGH** - Any app configurations applied after `.mount()` is called are silently ignored. This includes error handlers, global components, directives, and plugins, leading to mysterious missing functionality.
12 
13The `.mount()` method should always be called after all app configurations and asset registrations are done. This is a critical ordering requirement that, when violated, produces no errors but causes features to silently fail.
14 
15## Task Checklist
16 
17- [ ] Register all plugins (router, store, etc.) before mount()
18- [ ] Configure error handlers before mount()
19- [ ] Register global components and directives before mount()
20- [ ] Set all `app.config` properties before mount()
21- [ ] Call `.mount()` as the final step in app initialization
22 
23**Incorrect:**
24```javascript
25import { createApp } from 'vue'
26import App from './App.vue'
27import router from './router'
28 
29const app = createApp(App)
30 
31// WRONG: Mounting first, then configuring
32app.mount('#app')
33 
34// These are silently IGNORED - app is already mounted!
35app.use(router)
36app.config.errorHandler = (err) => {
37  console.error('Global error:', err)
38}
39app.component('GlobalButton', GlobalButton)
40```
41 
42**Correct:**
43```javascript
44import { createApp } from 'vue'
45import App from './App.vue'
46import router from './router'
47import { createPinia } from 'pinia'
48import GlobalButton from './components/GlobalButton.vue'
49 
50const app = createApp(App)
51 
52// Configure everything FIRST
53app.use(router)
54app.use(createPinia())
55 
56// Set up error handling
57app.config.errorHandler = (err, instance, info) => {
58  console.error('Global error:', err)
59  console.log('Component:', instance)
60  console.log('Error info:', info)
61}
62 
63// Register global components
64app.component('GlobalButton', GlobalButton)
65 
66// Mount LAST - after all configuration is complete
67app.mount('#app')
68```
69 
70## Common Mistake: Chaining with Mount
71 
72```javascript
73// WRONG: Chaining mount in the middle of configuration
74createApp(App)
75  .use(router)
76  .mount('#app')  // Everything after this line is a problem
77  .use(pinia)     // This doesn't even work - mount returns component instance!
78 
79// CORRECT: Either complete chain before mount, or use intermediate variable
80createApp(App)
81  .use(router)
82  .use(pinia)
83  .component('GlobalButton', GlobalButton)
84  .mount('#app')  // Mount at the very end
85```
86 
87## Reference
88- [Vue.js - Creating a Vue Application](https://vuejs.org/guide/essentials/application.html)
89- [Vue.js Application API](https://vuejs.org/api/application.html)
90