1---
2title: Use import.meta.glob for Dynamic Component Registration in Vite
3impact: MEDIUM
4impactDescription: require.context from Webpack doesn't work in Vite projects
5type: gotcha
6tags: [vue3, component-registration, vite, dynamic-import, migration, webpack]
7---
8 
9# Use import.meta.glob for Dynamic Component Registration in Vite
10 
11**Impact: MEDIUM** - When migrating from Webpack to Vite or starting a new Vite project, the `require.context` pattern for dynamically registering components won't work. Vite uses `import.meta.glob` instead. Using the wrong approach will cause build errors or runtime failures.
12 
13## Task Checklist
14 
15- [ ] Replace `require.context` with `import.meta.glob` in Vite projects
16- [ ] Update component registration patterns when migrating from Vue CLI to Vite
17- [ ] Use `{ eager: true }` for synchronous loading when needed
18- [ ] Handle async components appropriately with `defineAsyncComponent`
19 
20**Incorrect (Webpack pattern - doesn't work in Vite):**
21```javascript
22// main.js - WRONG for Vite
23import { createApp } from 'vue'
24import App from './App.vue'
25 
26const app = createApp(App)
27 
28// This Webpack-specific API doesn't exist in Vite
29const requireComponent = require.context(
30  './components/base',
31  false,
32  /Base[A-Z]\w+\.vue$/
33)
34 
35requireComponent.keys().forEach(fileName => {
36  const componentConfig = requireComponent(fileName)
37  const componentName = fileName
38    .split('/')
39    .pop()
40    .replace(/\.\w+$/, '')
41 
42  app.component(componentName, componentConfig.default || componentConfig)
43})
44 
45app.mount('#app')
46```
47 
48**Correct (Vite pattern):**
49```javascript
50// main.js - Correct for Vite
51import { createApp } from 'vue'
52import App from './App.vue'
53 
54const app = createApp(App)
55 
56// Vite's glob import - eager loading for synchronous registration
57const modules = import.meta.glob('./components/base/Base*.vue', { eager: true })
58 
59for (const path in modules) {
60  // Extract component name from path: './components/base/BaseButton.vue' -> 'BaseButton'
61  const componentName = path.split('/').pop().replace('.vue', '')
62  app.component(componentName, modules[path].default)
63}
64 
65app.mount('#app')
66```
67 
68## Lazy Loading with Async Components
69 
70```javascript
71// main.js - Lazy loading variant
72import { createApp, defineAsyncComponent } from 'vue'
73import App from './App.vue'
74 
75const app = createApp(App)
76 
77// Without { eager: true }, returns functions that return Promises
78const modules = import.meta.glob('./components/base/Base*.vue')
79 
80for (const path in modules) {
81  const componentName = path.split('/').pop().replace('.vue', '')
82  // Wrap in defineAsyncComponent for lazy loading
83  app.component(componentName, defineAsyncComponent(modules[path]))
84}
85 
86app.mount('#app')
87```
88 
89## Glob Pattern Examples
90 
91```javascript
92// All .vue files in a directory (not recursive)
93import.meta.glob('./components/*.vue', { eager: true })
94 
95// All .vue files recursively
96import.meta.glob('./components/**/*.vue', { eager: true })
97 
98// Specific naming pattern
99import.meta.glob('./components/Base*.vue', { eager: true })
100 
101// Multiple patterns
102import.meta.glob([
103  './components/Base*.vue',
104  './components/App*.vue'
105], { eager: true })
106 
107// Exclude patterns
108import.meta.glob('./components/**/*.vue', {
109  eager: true,
110  ignore: ['**/*.test.vue', '**/*.spec.vue']
111})
112```
113 
114## TypeScript Support
115 
116```typescript
117// main.ts - with proper typing
118import { createApp, Component } from 'vue'
119import App from './App.vue'
120 
121const app = createApp(App)
122 
123const modules = import.meta.glob<{ default: Component }>(
124  './components/base/Base*.vue',
125  { eager: true }
126)
127 
128for (const path in modules) {
129  const componentName = path.split('/').pop()!.replace('.vue', '')
130  app.component(componentName, modules[path].default)
131}
132 
133app.mount('#app')
134```
135 
136## Migration Checklist (Webpack to Vite)
137 
138| Webpack | Vite |
139|---------|------|
140| `require.context(dir, recursive, regex)` | `import.meta.glob(pattern, options)` |
141| Synchronous by default | Use `{ eager: true }` for sync |
142| `.keys()` returns array | Returns object with paths as keys |
143| Returns module directly | Access via `.default` for ES modules |
144 
145## Reference
146- [Vite - Glob Import](https://vitejs.dev/guide/features.html#glob-import)
147- [Vue.js Component Registration](https://vuejs.org/guide/components/registration.html)
148