diff --git a/vite.md b/vite.md index 23932319826..1400e29c941 100644 --- a/vite.md +++ b/vite.md @@ -27,6 +27,7 @@ - [Subresource Integrity (SRI)](#subresource-integrity-sri) - [Arbitrary Attributes](#arbitrary-attributes) - [Advanced Customization](#advanced-customization) + - [Correcting Dev Server URLs](#correcting-dev-server-urls) ## Introduction @@ -792,3 +793,42 @@ export default defineConfig({ }, }); ``` + + +### Correcting Dev Server URLs + +Some plugins within the Vite ecosystem assume that URLs which begin with a forward-slash will always point to the Vite dev server. However, due to the nature of the Laravel integration, this is not the case. + +For example, the `vite-imagetools` plugin outputs URLs like the following while Vite is serving your assets: + +```html + +``` + +The `vite-imagetools` plugin is expecting that the output URL will be intercepted by Vite and the plugin may then handle all URLs that start with `/@imagetools`. If you are using plugins that are expecting this behaviour, you will need to manually correct the URLs. You can do this in your `vite.config.js` file by using the `transformOnServe` option. + +In this particular example, we will append the dev server URL to all occurrences of `/@imagetools` within the generated code: + +```js +import { defineConfig } from 'vite'; +import laravel from 'laravel-vite-plugin'; +import { imagetools } from 'vite-imagetools'; + +export default defineConfig({ + plugins: [ + laravel({ + // ... + transformOnServe: (code, devServerUrl) => code.replaceAll('/@imagetools', devServerUrl+'/@imagetools'), + }), + imagetools(), + ], +}); +``` + +Now, while Vite is serving Assets, it will output URLs that point to the Vite dev server: + +```html +- ++ +``` +