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
+-
++
+```
+