Skip to content

Commit b69c27a

Browse files
[9.x] Document Vite refresh option (#8022)
* document refresh option * update wording * formatting Co-authored-by: Taylor Otwell <taylor@laravel.com>
1 parent a047d83 commit b69c27a

File tree

1 file changed

+59
-0
lines changed

1 file changed

+59
-0
lines changed

vite.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
- [Inertia](#inertia)
1515
- [URL Processing](#url-processing)
1616
- [Working With Stylesheets](#working-with-stylesheets)
17+
- [Working With Blade & Routes](#working-with-blade-and-routes)
1718
- [Custom Base URLs](#custom-base-urls)
1819
- [Environment Variables](#environment-variables)
1920
- [Server-Side Rendering (SSR)](#ssr)
@@ -324,6 +325,64 @@ module.exports = {
324325
};
325326
```
326327
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+
327386
<a name="custom-base-urls"></a>
328387
## Custom Base URLs
329388

0 commit comments

Comments
 (0)