1# Install Plugins Before Mounting the App
2 
3## Rule
4 
5All plugins must be installed using `app.use()` BEFORE calling `app.mount()`. Installing plugins after the app is mounted can lead to reactivity issues, missing dependencies, and unexpected behavior.
6 
7## Why This Matters
8 
91. **Hidden dependencies**: Components may render before plugins they depend on are available, causing runtime errors.
10 
112. **Reactivity issues**: Late plugin installation can cause subtle reactivity problems where provided values aren't properly reactive.
12 
133. **Initialization order**: Many plugins (like vue-router, pinia) need to set up state before any component renders.
14 
154. **Ecosystem complexity**: Adding plugins after mount can cause issues with Vue's internal ecosystem and hydration in SSR scenarios.
16 
17## Bad Practice
18 
19```typescript
20import { createApp } from 'vue'
21import App from './App.vue'
22import router from './router'
23import i18nPlugin from './plugins/i18n'
24 
25const app = createApp(App)
26 
27// Mounting first - plugins not yet available!
28app.mount('#app')
29 
30// Installing after mount - TOO LATE!
31app.use(router)
32app.use(i18nPlugin, { locale: 'en' })
33```
34 
35## Good Practice
36 
37```typescript
38import { createApp } from 'vue'
39import App from './App.vue'
40import router from './router'
41import { createPinia } from 'pinia'
42import i18nPlugin from './plugins/i18n'
43 
44const app = createApp(App)
45 
46// Install all plugins BEFORE mounting
47app.use(createPinia())
48app.use(router)
49app.use(i18nPlugin, { locale: 'en' })
50 
51// Mount LAST
52app.mount('#app')
53```
54 
55## Plugin Installation Order
56 
57The order of `app.use()` calls can matter when plugins depend on each other:
58 
59```typescript
60const app = createApp(App)
61 
62// 1. State management first (other plugins might need it)
63app.use(createPinia())
64 
65// 2. Router (may depend on state)
66app.use(router)
67 
68// 3. Other plugins (may depend on router or state)
69app.use(authPlugin)
70app.use(i18nPlugin, { locale: 'en' })
71 
72// 4. Mount last
73app.mount('#app')
74```
75 
76## Async Plugin Installation
77 
78If you need to perform async operations before mounting:
79 
80```typescript
81import { createApp } from 'vue'
82import App from './App.vue'
83import { loadPlugins } from './plugins'
84 
85async function bootstrap() {
86  const app = createApp(App)
87 
88  // Await async plugin setup
89  const i18nPlugin = await loadI18nMessages()
90 
91  // Install all plugins
92  app.use(i18nPlugin)
93 
94  // Mount after everything is ready
95  app.mount('#app')
96}
97 
98bootstrap()
99```
100 
101## Duplicate Installation Protection
102 
103Vue's `app.use()` automatically prevents duplicate plugin installation:
104 
105```typescript
106app.use(myPlugin)
107app.use(myPlugin) // This second call is ignored - no double installation
108 
109// This is handled internally by Vue, providing a safety net
110```
111 
112## Common Symptoms of Late Plugin Installation
113 
114- `inject()` returns `undefined` unexpectedly
115- Router navigation guards not firing
116- Store state not reactive
117- Template errors about undefined global properties
118- Hydration mismatches in SSR
119 
120## References
121 
122- [Vue.js Plugins Documentation](https://vuejs.org/guide/reusability/plugins.html)
123- [Vue.js Application API](https://vuejs.org/api/application.html)
124- [Vue 3 Migration Guide - Global API](https://v3-migration.vuejs.org/breaking-changes/global-api.html)
125