0
# Inertia.js Helpers
1

2
Utilities for dynamic page component resolution in Inertia.js applications, enabling code splitting and lazy loading of page components.
3

4
## Capabilities
5

6
### Page Component Resolution
7

8
Resolves page components from Vite's import.meta.glob() patterns for dynamic loading in Inertia.js applications.
9

10
```typescript { .api }
11
/**
12
 * Resolves page components for Inertia.js dynamic imports
13
 * @param path - Single path or array of paths to resolve
14
 * @param pages - Object mapping paths to component promises or factory functions
15
 * @returns Promise resolving to the matched component
16
 * @throws Error if no matching page is found
17
 */
18
export async function resolvePageComponent<T>(
19
  path: string | string[],
20
  pages: Record<string, Promise<T> | (() => Promise<T>)>
21
): Promise<T>;
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
28

29
// Basic usage with single path
30
const component = await resolvePageComponent(
31
  "Pages/Dashboard",
32
  import.meta.glob("./Pages/**/*.vue")
33
);
34

35
// Usage with eager loading
36
const component = await resolvePageComponent(
37
  "Pages/Dashboard",
38
  import.meta.glob("./Pages/**/*.vue", { eager: true })
39
);
40

41
// Multiple fallback paths
42
const component = await resolvePageComponent(
43
  ["Pages/CustomDashboard", "Pages/Dashboard", "Pages/Home"],
44
  import.meta.glob("./Pages/**/*.vue")
45
);
46

47
// TypeScript with component typing
48
interface VueComponent {
49
  default: any;
50
  __hmrId?: string;
51
}
52

53
const component = await resolvePageComponent<VueComponent>(
54
  "Pages/UserProfile",
55
  import.meta.glob("./Pages/**/*.vue")
56
);
57
```
58

59
## Integration with Inertia.js
60

61
The `resolvePageComponent` function is designed to work seamlessly with Inertia.js page resolution:
62

63
```typescript
64
// In your Inertia.js setup (app.js)
65
import { createApp, h } from "vue";
66
import { createInertiaApp } from "@inertiajs/vue3";
67
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
68

69
createInertiaApp({
70
  title: (title) => `${title} - My App`,
71
  resolve: (name) => resolvePageComponent(
72
    `./Pages/${name}.vue`,
73
    import.meta.glob("./Pages/**/*.vue")
74
  ),
75
  setup({ el, App, props, plugin }) {
76
    return createApp({ render: () => h(App, props) })
77
      .use(plugin)
78
      .mount(el);
79
  },
80
});
81
```
82

83
## Error Handling
84

85
The function throws descriptive errors when page components cannot be resolved:
86

87
```typescript
88
// Single path error
89
await resolvePageComponent("NonexistentPage", pages);
90
// Throws: Error('Page not found: NonexistentPage')
91

92
// Multiple paths error
93
await resolvePageComponent(["Page1", "Page2"], pages);
94
// Throws: Error('Page not found: Page1,Page2')
95
```
96

97
## Component Loading Patterns
98

99
### Lazy Loading (Default)
100

101
Components are loaded on-demand when accessed:
102

103
```typescript
104
const pages = import.meta.glob("./Pages/**/*.vue");
105
// Components load when resolvePageComponent is called
106
```
107

108
### Eager Loading
109

110
All components are loaded immediately at build time:
111

112
```typescript
113
const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
114
// All components are included in the initial bundle
115
```
116

117
### Mixed Patterns
118

119
You can combine different loading strategies for optimal performance:
120

121
```typescript
122
// Critical pages loaded eagerly
123
const criticalPages = import.meta.glob("./Pages/{Home,Login,Dashboard}.vue", { eager: true });
124

125
// Other pages loaded lazily
126
const otherPages = import.meta.glob("./Pages/**/*.vue");
127

128
// Merge patterns
129
const allPages = { ...criticalPages, ...otherPages };
130

131
const component = await resolvePageComponent(pageName, allPages);
132
```
133

134
## Framework Compatibility
135

136
The helper works with various frontend frameworks supported by Inertia.js:
137

138
### Vue.js
139

140
```typescript
141
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
142

143
const component = await resolvePageComponent(
144
  "Pages/UserProfile",
145
  import.meta.glob("./Pages/**/*.vue")
146
);
147
```
148

149
### React
150

151
```typescript
152
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
153

154
const component = await resolvePageComponent(
155
  "Pages/UserProfile",
156
  import.meta.glob("./Pages/**/*.jsx")
157
);
158
```
159

160
### Svelte
161

162
```typescript
163
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
164

165
const component = await resolvePageComponent(
166
  "Pages/UserProfile",
167
  import.meta.glob("./Pages/**/*.svelte")
168
);
169
```