Skip to content

Commit

Permalink
[9.x] Document Vite refresh option (#8022)
Browse files Browse the repository at this point in the history
* document refresh option

* update wording

* formatting

Co-authored-by: Taylor Otwell <taylor@laravel.com>
  • Loading branch information
timacdonald and taylorotwell authored Jul 11, 2022
1 parent a047d83 commit b69c27a
Showing 1 changed file with 59 additions and 0 deletions.
59 changes: 59 additions & 0 deletions vite.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
- [Inertia](#inertia)
- [URL Processing](#url-processing)
- [Working With Stylesheets](#working-with-stylesheets)
- [Working With Blade & Routes](#working-with-blade-and-routes)
- [Custom Base URLs](#custom-base-urls)
- [Environment Variables](#environment-variables)
- [Server-Side Rendering (SSR)](#ssr)
Expand Down Expand Up @@ -324,6 +325,64 @@ module.exports = {
};
```
<a name="working-with-blade-and-routes"></a>
## Working With Blade & Routes
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`.
```js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
plugins: [
laravel({
// ...
refresh: true,
}),
],
});
```
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`.
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.
If these default paths do not suit your needs, you can specify your own list of paths to watch:
```js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
// ...
refresh: ['resources/views/**'],
}),
],
});
```
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:
```js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
// ...
refresh: [{
paths: ['path/to/watch/**'],
config: { delay: 300 }],
}],
}),
],
});
```
<a name="custom-base-urls"></a>
## Custom Base URLs
Expand Down

0 comments on commit b69c27a

Please sign in to comment.