0
# Laravel Vite Plugin
1

2
Laravel Vite Plugin provides seamless integration between Laravel applications and Vite's modern frontend build tooling. It handles asset compilation, hot module replacement during development, and provides configuration options for Laravel-specific requirements including SSR support, full page reload capabilities, and Inertia.js helpers.
3

4
## Package Information
5

6
- **Package Name**: laravel-vite-plugin
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install laravel-vite-plugin`
10

11
## Core Imports
12

13
Main plugin import:
14

15
```typescript
16
import laravel from "laravel-vite-plugin";
17
```
18

19
Inertia.js helpers import:
20

21
```typescript
22
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
23
```
24

25
CommonJS (legacy):
26

27
```javascript
28
const laravel = require("laravel-vite-plugin");
29
const { resolvePageComponent } = require("laravel-vite-plugin/inertia-helpers");
30
```
31

32
## Basic Usage
33

34
Basic Vite configuration with Laravel plugin:
35

36
```typescript
37
import { defineConfig } from "vite";
38
import laravel from "laravel-vite-plugin";
39

40
export default defineConfig({
41
  plugins: [
42
    laravel({
43
      input: ["resources/css/app.css", "resources/js/app.js"],
44
      refresh: true,
45
    })
46
  ],
47
});
48
```
49

50
With SSR support:
51

52
```typescript
53
import { defineConfig } from "vite";
54
import laravel from "laravel-vite-plugin";
55

56
export default defineConfig({
57
  plugins: [
58
    laravel({
59
      input: "resources/js/app.js",
60
      ssr: "resources/js/ssr.js",
61
      refresh: true,
62
    })
63
  ],
64
});
65
```
66

67
## Architecture
68

69
Laravel Vite Plugin is built around several key components:
70

71
- **Core Plugin**: Main Vite plugin that configures build settings, dev server, and Laravel-specific options
72
- **Configuration System**: Flexible configuration handling supporting multiple input formats and Laravel conventions
73
- **Development Server Integration**: Hot module replacement, CORS setup, and Laravel environment detection
74
- **SSR Support**: Separate entry points and build configurations for server-side rendering
75
- **Full Page Reload**: Integration with vite-plugin-full-reload for file-watching capabilities
76
- **Inertia.js Helpers**: Utilities for dynamic page component resolution in Inertia.js applications
77
- **Asset Management**: CLI tools for orphaned asset cleanup and manifest-based tracking
78

79
## Capabilities
80

81
### Plugin Configuration
82

83
Core Laravel Vite plugin factory function and configuration options. Essential for setting up Vite with Laravel applications.
84

85
```typescript { .api }
86
export default function laravel(
87
  config: string | string[] | PluginConfig
88
): [LaravelPlugin, ...Plugin[]];
89

90
interface PluginConfig {
91
  /** Entry points to compile */
92
  input: Rollup.InputOption;
93
  /** Laravel's public directory (default: 'public') */
94
  publicDirectory?: string;
95
  /** Build subdirectory (default: 'build') */
96
  buildDirectory?: string;
97
  /** Path to hot file (default: `${publicDirectory}/hot`) */
98
  hotFile?: string;
99
  /** SSR entry point */
100
  ssr?: Rollup.InputOption;
101
  /** SSR output directory (default: 'bootstrap/ssr') */
102
  ssrOutputDirectory?: string;
103
  /** Full reload configuration */
104
  refresh?: boolean | string | string[] | RefreshConfig | RefreshConfig[];
105
  /** TLS certificate detection for Herd/Valet */
106
  detectTls?: string | boolean | null;
107
  /** @deprecated Use "detectTls" instead. Legacy TLS certificate detection */
108
  valetTls?: string | boolean | null;
109
  /** Transform function for development server */
110
  transformOnServe?: (code: string, url: DevServerUrl) => string;
111
}
112
```
113

114
[Plugin Configuration](./plugin-configuration.md)
115

116
## Types
117

118
```typescript { .api }
119
interface RefreshConfig {
120
  /** Paths to watch for changes */
121
  paths: string[];
122
  /** vite-plugin-full-reload configuration options */
123
  config?: FullReloadConfig;
124
}
125

126
type DevServerUrl = `${'http' | 'https'}://${string}:${number}`;
127

128
interface LaravelPlugin extends Plugin {
129
  config: (config: UserConfig, env: ConfigEnv) => UserConfig;
130
}
131
```
132

133
### Inertia.js Helpers
134

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

137
```typescript { .api }
138
export async function resolvePageComponent<T>(
139
  path: string | string[],
140
  pages: Record<string, Promise<T> | (() => Promise<T>)>
141
): Promise<T>;
142
```
143

144
[Inertia.js Helpers](./inertia-helpers.md)
145

146
### Asset Management
147

148
CLI tools for cleaning up orphaned assets that are no longer referenced in Vite manifests.
149

150
```bash { .api }
151
# Clean orphaned assets from build directory
152
clean-orphaned-assets [options]
153

154
Options:
155
  --manifest=<path>   Path to manifest file
156
  --ssr               Use SSR manifest locations
157
  --assets=<path>     Assets directory path
158
  --dry-run           Show what would be removed without deleting
159
  --quiet             Suppress output
160
```
161

162
[Asset Management](./asset-management.md)
163

164
## Default Configuration Values
165

166
```typescript { .api }
167
export const refreshPaths: string[];
168
```
169

170
Default paths watched for full page reload functionality.