|
14 | 14 | - [Inertia](#inertia)
|
15 | 15 | - [URL Processing](#url-processing)
|
16 | 16 | - [Working With Stylesheets](#working-with-stylesheets)
|
| 17 | +- [Working With Blade & Routes](#working-with-blade-and-routes) |
17 | 18 | - [Custom Base URLs](#custom-base-urls)
|
18 | 19 | - [Environment Variables](#environment-variables)
|
19 | 20 | - [Server-Side Rendering (SSR)](#ssr)
|
@@ -324,6 +325,64 @@ module.exports = {
|
324 | 325 | };
|
325 | 326 | ```
|
326 | 327 |
|
| 328 | +<a name="working-with-blade-and-routes"></a> |
| 329 | +## Working With Blade & Routes |
| 330 | +
|
| 331 | +When your application is built using traditional server-side rendering with Blade, Vite can improve your development workflow by automatically refreshing the browser when you make changes to view files in your application. To get started, you can simply specify the `refresh` option as `true`. |
| 332 | +
|
| 333 | +```js |
| 334 | +import { defineConfig } from 'vite'; |
| 335 | +import laravel from 'laravel-vite-plugin'; |
| 336 | + |
| 337 | +export default defineConfig({ |
| 338 | + plugins: [ |
| 339 | + laravel({ |
| 340 | + // ... |
| 341 | + refresh: true, |
| 342 | + }), |
| 343 | + ], |
| 344 | +}); |
| 345 | +``` |
| 346 | +
|
| 347 | +When the `refresh` option is `true`, saving files in `resources/views/**`, `app/View/Components/**`, and `routes/**` will trigger the browser to perform a full page refresh while you are running `npm run dev`. |
| 348 | +
|
| 349 | +Watching the `routes/**` directory is useful if you are utilizing [Ziggy](https://github.com/tighten/ziggy) to generate route links within your application's frontend. |
| 350 | +
|
| 351 | +If these default paths do not suit your needs, you can specify your own list of paths to watch: |
| 352 | +
|
| 353 | +```js |
| 354 | +import { defineConfig } from 'vite'; |
| 355 | +import laravel from 'laravel-vite-plugin'; |
| 356 | +
|
| 357 | +export default defineConfig({ |
| 358 | + plugins: [ |
| 359 | + laravel({ |
| 360 | + // ... |
| 361 | + refresh: ['resources/views/**'], |
| 362 | + }), |
| 363 | + ], |
| 364 | +}); |
| 365 | +``` |
| 366 | +
|
| 367 | +Under the hood, the Laravel Vite plugin uses the [`vite-plugin-full-reload`](https://github.com/ElMassimo/vite-plugin-full-reload) package, which offers some advanced configuration options to fine-tune this feature's behavior. If you need this level of customization, you may provide a `config` definition: |
| 368 | +
|
| 369 | +```js |
| 370 | +import { defineConfig } from 'vite'; |
| 371 | +import laravel from 'laravel-vite-plugin'; |
| 372 | +
|
| 373 | +export default defineConfig({ |
| 374 | + plugins: [ |
| 375 | + laravel({ |
| 376 | + // ... |
| 377 | + refresh: [{ |
| 378 | + paths: ['path/to/watch/**'], |
| 379 | + config: { delay: 300 }], |
| 380 | + }], |
| 381 | + }), |
| 382 | + ], |
| 383 | +}); |
| 384 | +``` |
| 385 | +
|
327 | 386 | <a name="custom-base-urls"></a>
|
328 | 387 | ## Custom Base URLs
|
329 | 388 |
|
|
0 commit comments