4 | 
5 | 
6 | 
7 |
8 | ## Introduction
9 |
10 | [Vite](https://vitejs.dev) is a modern frontend build tool that provides an extremely fast development environment and bundles your code for production.
11 |
12 | This plugin configures Vite for use with a Laravel backend server.
13 |
14 | ## Official Documentation
15 |
16 | Documentation for the Laravel Vite plugin can be found on the [Laravel website](https://laravel.com/docs/vite).
17 |
18 | ## Contributing
19 |
20 | Thank you for considering contributing to the Laravel Vite plugin! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
21 |
22 | ## Code of Conduct
23 |
24 | In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
25 |
26 | ## Security Vulnerabilities
27 |
28 | Please review [our security policy](https://github.com/laravel/vite-plugin/security/policy) on how to report security vulnerabilities.
29 |
30 | ## License
31 |
32 | The Laravel Vite plugin is open-sourced software licensed under the [MIT license](LICENSE.md).
33 |
--------------------------------------------------------------------------------
/RELEASE.md:
--------------------------------------------------------------------------------
1 | # Release Instructions
2 |
3 | Releases are managed by [@taylorotwell](https://github.com/taylorotwell), [@jessarcher](https://github.com/jessarcher), and [@timacdonald](https://github.com/timacdonald) for this repository.
4 |
5 | 1. Update the version number in [package.json](./package.json) and commit it
6 | 2. `rm -rf node_modules package-lock.json`
7 | 3. `npm install`
8 | 4. `npm run build`
9 | 5. `npm publish`
10 | 6. Create a new GitHub release for this version with the release notes
11 |
--------------------------------------------------------------------------------
/UPGRADE.md:
--------------------------------------------------------------------------------
1 | # Upgrade Guide
2 |
3 | ## `0.x` to `1.x`
4 |
5 | - Adds support for Vite 5 and removes support for Vite 3 and 4.
6 | - Introduces an `npx clean-orphaned-assets` command to clean orphaned assets in Vite's build directories.
7 | - Introduces Valet / Herd TLS certificate auto detection.
8 | - Adds `app/Livewire/**` to the default "refresh" paths.
9 | - Adds output of SSR manifest for SSR builds.
10 |
11 | ### Notable Changes
12 |
13 | 1. Dropped CJS build: https://github.com/laravel/vite-plugin/pull/235
14 | 2. Dropped support for a `boolean` value of `server.https` option in `vite.config.js`: https://github.com/laravel/vite-plugin/pull/254
15 | 3. Dropped support for Node 14, 15, 16, 17, and 19: https://github.com/laravel/vite-plugin/pull/269
16 |
17 | Please see the [Vite migration documentation](https://vitejs.dev/guide/migration) for why these changes have been made and additional changes you may need to consider.
18 |
19 | ### Upgrade Path
20 |
21 | 1. Update to the latest version of the `laravel-vite-plugin`, `vite`, and any Vite plugins you may have installed, such as [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) which requires version `^4.5.0` or [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react) which requires version `^4.2.0` to be compatible with Vite 5.
22 |
23 | The following command will update `laravel-vite-plugin` and `vite` only. You may need to include any additional plugin updates as needed by your application:
24 |
25 | ```
26 | npm install --save-dev vite@^5.0.0 laravel-vite-plugin@^1.0.0
27 | ```
28 |
29 | You should also check the upgrade guide and changelogs for any packages you update, including [Vite's migrations guide](https://vitejs.dev/guide/migration.html).
30 |
31 | 2. Ensure your `package.json` contains `"type": "module"`.
32 |
33 | Run the following command in your project's root directory or anywhere you have your `package.json` files:
34 |
35 | ```sh
36 | npm pkg set type=module
37 | ```
38 |
39 | You may also need to rename any `*.js` configuration files that contain CJS, which is the older-style Node-flavored `var plugin = require('plugin')` syntax, to `filename.cjs` after making this change.
40 |
41 | ## Migrating from Laravel Mix to Vite
42 |
43 | > **Note**
44 | > This upgrade guide does not cover all possible Mix use cases, such as Sass compilation. Please consult the [Vite documentation](https://vitejs.dev/guide/) for information on configuring Vite for these scenarios.
45 |
46 | ### Update Laravel Framework
47 |
48 | To make use of the new Vite integration, you will need to update to at least version `9.19.0` of the `laravel/framework`:
49 |
50 | ```sh
51 | composer require laravel/framework:^9.19.0
52 | ```
53 |
54 | ### Install Vite and the Laravel Plugin
55 |
56 | First, you will need to install [Vite](https://vitejs.dev/) and the [Laravel Vite Plugin](https://www.npmjs.com/package/laravel-vite-plugin) using your npm package manager of choice:
57 |
58 | ```shell
59 | npm install --save-dev vite laravel-vite-plugin
60 | ```
61 |
62 | You may also need to install additional Vite plugins for your project, such as the Vue or React plugins:
63 |
64 | ```shell
65 | npm install --save-dev @vitejs/plugin-vue
66 | ```
67 |
68 | ```shell
69 | npm install --save-dev @vitejs/plugin-react
70 | ```
71 |
72 | ### Configure Vite
73 |
74 | Create a `vite.config.js` file in the root of your project:
75 |
76 | ```js
77 | import { defineConfig } from 'vite';
78 | import laravel from 'laravel-vite-plugin';
79 | // import react from '@vitejs/plugin-react';
80 | // import vue from '@vitejs/plugin-vue';
81 |
82 | export default defineConfig({
83 | plugins: [
84 | laravel([
85 | 'resources/css/app.css',
86 | 'resources/js/app.js',
87 | ]),
88 | // react(),
89 | // vue({
90 | // template: {
91 | // transformAssetUrls: {
92 | // base: null,
93 | // includeAbsolute: false,
94 | // },
95 | // },
96 | // }),
97 | ],
98 | });
99 | ```
100 |
101 | If you are building an SPA, you will get a better developer experience by removing the CSS entry point above and [importing your CSS from Javascript](#importing-your-css-from-your-javascript-entry-points).
102 |
103 | #### Update Aliases
104 |
105 | If you are migrating aliases from your `webpack.mix.js` file to your `vite.config.js` file, you should ensure that the paths start with `/`. For example, `resources/js` would become `/resources/js`:
106 |
107 | ```js
108 | export default defineConfig({
109 | plugins: [
110 | laravel([
111 | 'resources/css/app.css',
112 | 'resources/js/app.js',
113 | ]),
114 | ],
115 | resolve: {
116 | alias: {
117 | '@': '/resources/js'
118 | }
119 | }
120 | });
121 | ```
122 |
123 | For your convenience, the Laravel Vite plugin automatically adds an `@` alias for your `/resources/js` directory. If you do not need to customize your aliases, you may omit this section from your `vite.config.js` file.
124 |
125 | ### Update NPM scripts
126 |
127 | Update your NPM scripts in `package.json`:
128 |
129 | ```diff
130 | "scripts": {
131 | - "dev": "npm run development",
132 | - "development": "mix",
133 | - "watch": "mix watch",
134 | - "watch-poll": "mix watch -- --watch-options-poll=1000",
135 | - "hot": "mix watch --hot",
136 | - "prod": "npm run production",
137 | - "production": "mix --production"
138 | + "dev": "vite",
139 | + "build": "vite build"
140 | }
141 | ```
142 |
143 | You should also add `"type": "module"` as a top-level key / value pair to your project's `package.json` by running the following command:
144 |
145 | ```shell
146 | npm pkg set type="module"
147 | ```
148 |
149 | ### Vite compatible imports
150 |
151 | Vite only supports ES modules, so if you are upgrading an existing application you will need to replace any `require()` statements with `import`. You may refer to [this pull request](https://github.com/laravel/laravel/pull/5895/files) for an example.
152 |
153 | #### Inertia
154 |
155 | Inertia makes use of a `require()` call that is more complex to replicate with Vite.
156 |
157 | The following function can be used instead:
158 |
159 | ```diff
160 | + import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
161 |
162 | createInertiaApp({
163 | title: (title) => `${title} - ${appName}`,
164 | - resolve: (name) => require(`./Pages/${name}.vue`),
165 | + resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
166 | setup({ el, app, props, plugin }) {
167 | return createApp({ render: () => h(app, props) })
168 | .use(plugin)
169 | .mixin({ methods: { route } })
170 | .mount(el);
171 | },
172 | });
173 | ```
174 |
175 | Additionally, you should ensure you have updated to at least version `0.6.3` of the `inertia-laravel` package:
176 |
177 | ```sh
178 | composer require inertiajs/inertia-laravel:^0.6.3
179 | ```
180 |
181 | ### Update environment variables
182 |
183 | You will need to update the environment variables that are explicitly exposed in your `.env` files and in hosting environments such as Forge to use the `VITE_` prefix instead of `MIX_`:
184 |
185 | ```diff
186 | - MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
187 | - MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
188 | + VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
189 | + VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
190 | ```
191 |
192 | > **Note**
193 | > You may optionally maintain the `MIX_` prefix by [configuring Vite](https://vitejs.dev/config/#envprefix) to use it.
194 |
195 | You will also need to update these references in your JavaScript code to use the new variable name and Vite syntax:
196 |
197 | ```diff
198 | - key: process.env.MIX_PUSHER_APP_KEY,
199 | - cluster: process.env.MIX_PUSHER_APP_CLUSTER,
200 | + key: import.meta.env.VITE_PUSHER_APP_KEY,
201 | + cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
202 | ```
203 |
204 | ### Importing your CSS from your JavaScript entry point(s)
205 |
206 | If you are building an SPA, you will get a better experience by importing your CSS from your JavaScript entry point(s), such as your `resources/js/app.js` entry point:
207 |
208 | ```diff
209 | import './bootstrap';
210 | + import '../css/app.css';
211 | ```
212 |
213 | In development mode, Vite will automatically inject your CSS into the page. In production, a dedicated stylesheet will be generated that the `@vite` directive will load from the manifest.
214 |
215 | ### Replace `mix()` with `@vite`
216 |
217 | When using Vite, you will need to use the `@vite` Blade directive instead of the `mix()` helper.
218 |
219 | This will automatically detect whether you are running in serve or build mode and include all of the required `
224 | + @vite(['resources/css/app.css', 'resources/js/app.js'])
225 | ```
226 |
227 | The entry points should match those used in your `vite.config.js`.
228 |
229 | #### React
230 |
231 | If you are using React and hot-module replacement, you will need to include an additional directive *before* the `@vite` directive:
232 |
233 | ```html
234 | @viteReactRefresh
235 | @vite('resources/js/app.jsx')
236 | ```
237 |
238 | This loads a React "refresh runtime" in development mode only, which is required for hot module replacement to work correctly.
239 |
240 | ### JavaScript files containing JSX must use a `.jsx` extension
241 |
242 | You will need to rename any `.js` files containing JSX to instead have a `.jsx` extension. If you need to rename your entry point then you should read the [entry point docs](https://laravel.com/docs/9.x/vite#configuring-vite) to learn how to configure the Laravel plugin for your project.
243 |
244 | See [this tweet](https://twitter.com/youyuxi/status/1362050255009816577) from Vite's creator for more information.
245 |
246 | > **Note**
247 | > If you are using Tailwind, remember to update the paths in your `tailwind.config.js` file.
248 |
249 | ### Vue imports must include the `.vue` extension
250 |
251 | ```diff
252 | - import Button from './Button';
253 | + import Button from './Button.vue';
254 | ```
255 |
256 | ### Remove Laravel Mix
257 |
258 | The Laravel Mix package can now be uninstalled:
259 |
260 | ```shell
261 | npm remove laravel-mix
262 | ```
263 |
264 | And you may remove your Mix configuration file:
265 |
266 | ```shell
267 | rm webpack.mix.js
268 | ```
269 |
270 | If you are using StyleCI and have ignored the `webpack.mix.js` file in your configuration, you may also wish to remove the ignore rule.
271 |
272 | ### Update Test Helpers
273 |
274 | If you are using the `$this->withoutMix();` helper in your tests, you should replace this with `$this->withoutVite()`:
275 |
276 | ```diff
277 | - $this->withoutMix();
278 | + $this->withoutVite();
279 | ```
280 |
281 | ### Vapor
282 |
283 | If you are deploying your application to Laravel Vapor, there are a few things you will want to handle before deploying.
284 |
285 | Ensure you have updated to at least version `1.40.0` of the Vapor CLI package:
286 |
287 | ```sh
288 | composer require laravel/vapor-cli:^1.40.0
289 | ```
290 |
291 | Next, if you are using the Vapor asset helper in your application, you only need to utilize the asset helper when you are referencing assets you don't want bundled, such as those that already live in your public directory.
292 |
293 | If you want to use the asset helper with your Vite project, you will also need to ensure you have updated to the latest version:
294 |
295 |
296 | ```sh
297 | npm install laravel-vapor@latest
298 | ```
299 |
300 | Then you will need to specify the base URL for assets in your application's entry point, for example in your `resources/js/app.js,` like so:
301 |
302 | ```diff
303 | - window.Vapor = require('laravel-vapor');
304 | + import Vapor from 'laravel-vapor';
305 |
306 | + window.Vapor = Vapor;
307 | + window.Vapor.withBaseAssetUrl(import.meta.env.VITE_VAPOR_ASSET_URL)
308 | ```
309 |
310 | ### Optional: Configure Tailwind
311 |
312 | If you are using Tailwind, perhaps with one of Laravel's starter kits, you will need to migrate your `tailwind.config.js` configuration file to use [Vite compatible imports](#vite-compatible-imports) and exports:
313 |
314 | ```diff
315 | - const defaultTheme = require('tailwindcss/defaultTheme');
316 | + import defaultTheme from 'tailwindcss/defaultTheme';
317 | + import forms from '@tailwindcss/forms';
318 |
319 | /** @type {import('tailwindcss').Config} */
320 | - module.exports = {
321 | + export default {
322 | content: [
323 | './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
324 | './storage/framework/views/*.php',
325 | './resources/views/**/*.blade.php',
326 | './resources/js/**/*.vue',
327 | ],
328 |
329 | theme: {
330 | extend: {
331 | fontFamily: {
332 | sans: ['Figtree', ...defaultTheme.fontFamily.sans],
333 | },
334 | },
335 | },
336 |
337 | - plugins: [require('@tailwindcss/forms')],
338 | + plugins: [forms],
339 | };
340 | ```
341 |
342 | You will also need to create a `postcss.config.cjs` file. Tailwind can generate this for you automatically:
343 |
344 | ```shell
345 | npx tailwindcss init -p
346 | ```
347 |
348 | Or, you can create it manually:
349 |
350 | ```js
351 | export default {
352 | plugins: {
353 | tailwindcss: {},
354 | autoprefixer: {},
355 | },
356 | }
357 | ```
358 |
359 | If you are using other PostCSS plugins, such as `postcss-import`, you will need to include them in your configuration.
360 |
361 | ### Optional: Git ignore the build directory
362 |
363 | Vite will place all of your build assets into a `build` subdirectory inside your public directory. If you prefer to build your assets on deploy instead of committing them to your repository, you may wish to add this directory to your `.gitignore` file:
364 |
365 | ```gitignore
366 | /public/build
367 | ```
368 |
369 | ### Optional: Update SSR configuration
370 |
371 | You may remove your dedicated Laravel Mix SSR configuration:
372 |
373 | ```shell
374 | rm webpack.ssr.mix.js
375 | ```
376 |
377 | In most cases, you won't need a dedicated SSR configuration file when using Vite. You can specify your SSR entry point by passing a configuration option to the Laravel plugin:
378 |
379 | ```js
380 | import { defineConfig } from 'vite';
381 | import laravel from 'laravel-vite-plugin';
382 |
383 | export default defineConfig({
384 | plugins: [
385 | laravel({
386 | input: 'resources/js/app.js',
387 | ssr: 'resources/js/ssr.js',
388 | }),
389 | ],
390 | });
391 | ```
392 |
393 | You may wish to add the following additional scripts to your `package.json`:
394 |
395 | ```diff
396 | "scripts": {
397 | "dev": "vite",
398 | - "build": "vite build"
399 | + "build": "vite build && vite build --ssr"
400 | }
401 | ```
402 |
403 | If you prefer to build your assets on deploy instead of committing them to your repository, you may wish to add the SSR output directory to your `.gitignore` file:
404 |
405 | ```gitignore
406 | /bootstrap/ssr
407 | ```
408 |
409 | You may start the SSR server using `node`:
410 |
411 | ```sh
412 | node bootstrap/ssr/ssr.mjs
413 | ```
414 |
415 | ### Optional: Expose Vite port when using Laravel Sail
416 |
417 | If you would like to run the `npm run dev` command in a Laravel Sail container, you will need to publish a port in your `docker-compose.yml` file:
418 |
419 | ```diff
420 | ports:
421 | - '${APP_PORT:-80}:80'
422 | + - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
423 | ```
424 |
425 | ### Wrapping up
426 |
427 | You should now be able to build your assets using `dev` command. This will also invoke the Vite server and Vite will watch for file changes:
428 |
429 | ```shell
430 | npm run dev
431 | ```
432 |
433 | Alternatively, if you need to build files without watching or if you need to build them for production, you may use the `build` command:
434 |
435 | ```shell
436 | npm run build
437 | ```
438 |
439 | For further information on how to use Vite, please check out [the Laravel Vite documentation](https://laravel.com/docs/vite).
440 |
441 | ### Troubleshooting
442 |
443 | If you have followed the upgrade guide, but are still having issues you should try the following steps:
444 |
445 | - Run `php artisan view:clear` to clear any compiled view assets.
446 | - If your development web server is running on HTTPS, check out the ["Working With A Secure Development Server"](https://laravel.com/docs/9.x/vite#working-with-a-secure-development-server) section of the documentation.
447 |
448 | ## Migrating from Vite to Laravel Mix
449 |
450 | ### Install Laravel Mix
451 |
452 | First, you will need to install Laravel Mix using your npm package manager of choice:
453 |
454 | ```shell
455 | npm install --save-dev laravel-mix
456 | ```
457 |
458 | ### Configure Mix
459 |
460 | Create a `webpack.mix.js` file in the root of your project:
461 |
462 | ```
463 | const mix = require('laravel-mix');
464 |
465 | /*
466 | |--------------------------------------------------------------------------
467 | | Mix Asset Management
468 | |--------------------------------------------------------------------------
469 | |
470 | | Mix provides a clean, fluent API for defining some Webpack build steps
471 | | for your Laravel applications. By default, we are compiling the CSS
472 | | file for the application as well as bundling up all the JS files.
473 | |
474 | */
475 |
476 | mix.js('resources/js/app.js', 'public/js')
477 | .postCss('resources/css/app.css', 'public/css', [
478 | //
479 | ]);
480 | ```
481 |
482 | ### Update NPM scripts
483 |
484 | Update your NPM scripts in `package.json`:
485 |
486 | ```diff
487 | "scripts": {
488 | - "dev": "vite",
489 | - "build": "vite build"
490 | + "dev": "npm run development",
491 | + "development": "mix",
492 | + "watch": "mix watch",
493 | + "watch-poll": "mix watch -- --watch-options-poll=1000",
494 | + "hot": "mix watch --hot",
495 | + "prod": "npm run production",
496 | + "production": "mix --production"
497 | }
498 | ```
499 |
500 | You should also remove the `type` key by running the following command:
501 |
502 | ```shell
503 | npm pkg delete type
504 | ```
505 |
506 | #### Inertia
507 |
508 | Vite requires a helper function to import page components which is not required with Laravel Mix. You can remove this as follows:
509 |
510 | ```diff
511 | - import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
512 |
513 | createInertiaApp({
514 | title: (title) => `${title} - ${appName}`,
515 | - resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
516 | + resolve: (name) => require(`./Pages/${name}.vue`),
517 | setup({ el, app, props, plugin }) {
518 | return createApp({ render: () => h(app, props) })
519 | .use(plugin)
520 | .mixin({ methods: { route } })
521 | .mount(el);
522 | },
523 | });
524 | ```
525 |
526 | ### Update environment variables
527 |
528 | You will need to update the environment variables that are explicitly exposed in your `.env` files and in hosting environments such as Forge to use the `MIX_` prefix instead of `VITE_`:
529 |
530 | ```diff
531 | - VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
532 | - VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
533 | + MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
534 | + MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
535 | ```
536 |
537 | You will also need to update these references in your JavaScript code to use the new variable name and Node syntax:
538 |
539 | ```diff
540 | - key: import.meta.env.VITE_PUSHER_APP_KEY,
541 | - cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
542 | + key: process.env.MIX_PUSHER_APP_KEY,
543 | + cluster: process.env.MIX_PUSHER_APP_CLUSTER,
544 | ```
545 |
546 | ### Remove CSS imports from your JavaScript entry point(s)
547 |
548 | If you are importing your CSS via JavaScript, you will need to remove these statements:
549 |
550 | ```js
551 | - import '../css/app.css';
552 | ```
553 |
554 | ### Replace `@vite` with `mix()`
555 |
556 | You will need to replace the `@vite` Blade directive with `
563 | ```
564 |
565 | ### Remove Vite and the Laravel Plugin
566 |
567 | Vite and the Laravel Plugin can now be uninstalled:
568 |
569 | ```shell
570 | npm remove vite laravel-vite-plugin
571 | ```
572 |
573 | Next, you may remove your Vite configuration file:
574 |
575 | ```shell
576 | rm vite.config.js
577 | ```
578 |
579 | You may also wish to remove any `.gitignore` paths you are no longer using:
580 |
581 | ```gitignore
582 | - /bootstrap/ssr
583 | - /public/build
584 | ```
585 |
586 | ### Optional: Configure Tailwind
587 |
588 | If you are using Tailwind, perhaps with one of Laravel's starter kits, you will need to update your `tailwind.config.js` configuration file to use CommonJS imports and exports:
589 |
590 | ```diff
591 | - import defaultTheme from 'tailwindcss/defaultTheme';
592 | - import forms from '@tailwindcss/forms';
593 | + const defaultTheme = require('tailwindcss/defaultTheme');
594 |
595 | - export default {
596 | + module.exports = {
597 | content: [
598 | './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
599 | './storage/framework/views/*.php',
600 | './resources/views/**/*.blade.php',
601 | './resources/js/**/*.vue',
602 | ],
603 |
604 | theme: {
605 | extend: {
606 | fontFamily: {
607 | sans: ['Figtree', ...defaultTheme.fontFamily.sans],
608 | },
609 | },
610 | },
611 |
612 | - plugins: [forms],
613 | + plugins: [require('@tailwindcss/forms')],
614 | };
615 | ```
616 |
617 | You may also migrate any PostCSS plugins from your `postcss.config.js` file to your `webpack.mix.js` file:
618 |
619 | ```diff
620 | mix.js('resources/js/app.js', 'public/js')
621 | .postCss('resources/css/app.css', 'public/css', [
622 | - //
623 | + require("tailwindcss"),
624 | ]);
625 | ```
626 |
627 | > **Note**
628 | > You do not need to include the `autoprefixer` plugin as Laravel Mix includes this by default.
629 |
630 | If you are using other PostCSS plugins, such as `postcss-import`, you will need to include them in your configuration. See the [Laravel Mix PostCSS documentation](https://laravel-mix.com/docs/6.0/postcss) for more information.
631 |
632 | Finally, you may also remove your PostCSS config file:
633 |
634 | ```shell
635 | rm postcss.config.js
636 | ```
637 |
--------------------------------------------------------------------------------
/bin/clean.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | import { readFileSync, readdirSync, unlinkSync, existsSync } from 'fs'
4 | import { dirname } from 'path'
5 |
6 | /*
7 | * Argv helpers.
8 | */
9 |
10 | const argument = (name) => {
11 | const index = process.argv.findIndex(argument => argument.startsWith(`--${name}=`))
12 |
13 | return index === -1
14 | ? undefined
15 | : process.argv[index].substring(`--${name}=`.length)
16 | }
17 |
18 | const option = (name) => process.argv.includes(`--${name}`)
19 |
20 | /*
21 | * Helpers.
22 | */
23 | const info = option(`quiet`) ? (() => undefined) : console.log
24 | const error = option(`quiet`) ? (() => undefined) : console.error
25 |
26 | /*
27 | * Clean.
28 | */
29 |
30 | const main = () => {
31 | const manifestPaths = argument(`manifest`) ? [argument(`manifest`)] : (option(`ssr`)
32 | ? [`./bootstrap/ssr/ssr-manifest.json`, `./bootstrap/ssr/manifest.json`]
33 | : [`./public/build/manifest.json`])
34 |
35 | const foundManifestPath = manifestPaths.find(existsSync)
36 |
37 | if (! foundManifestPath) {
38 | error(`Unable to find manifest file.`)
39 |
40 | process.exit(1)
41 | }
42 |
43 | info(`Reading manifest [${foundManifestPath}].`)
44 |
45 | const manifest = JSON.parse(readFileSync(foundManifestPath).toString())
46 |
47 | const manifestFiles = Object.keys(manifest)
48 |
49 | const isSsr = Array.isArray(manifest[manifestFiles[0]])
50 |
51 | isSsr
52 | ? info(`SSR manifest found.`)
53 | : info(`Non-SSR manifest found.`)
54 |
55 | const manifestAssets = isSsr
56 | ? manifestFiles.flatMap(key => manifest[key])
57 | : manifestFiles.flatMap(key => [
58 | ...manifest[key].css ?? [],
59 | manifest[key].file,
60 | ])
61 |
62 | const assetsPath = argument('assets') ?? dirname(foundManifestPath)+'/assets'
63 |
64 | info(`Verify assets in [${assetsPath}].`)
65 |
66 | const existingAssets = readdirSync(assetsPath, { withFileTypes: true })
67 |
68 | const orphanedAssets = existingAssets.filter(file => file.isFile())
69 | .filter(file => manifestAssets.findIndex(asset => asset.endsWith(`/${file.name}`)) === -1)
70 |
71 | if (orphanedAssets.length === 0) {
72 | info(`No ophaned assets found.`)
73 | } else {
74 | orphanedAssets.length === 1
75 | ? info(`[${orphanedAssets.length}] orphaned asset found.`)
76 | : info(`[${orphanedAssets.length}] orphaned assets found.`)
77 |
78 | orphanedAssets.forEach(asset => {
79 | const path = `${assetsPath}/${asset.name}`
80 |
81 | option(`dry-run`)
82 | ? info(`Orphaned asset [${path}] would be removed.`)
83 | : info(`Removing orphaned asset [${path}].`)
84 |
85 | if (! option(`dry-run`)) {
86 | unlinkSync(path)
87 | }
88 | })
89 | }
90 | }
91 |
92 | main()
93 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "laravel-vite-plugin",
3 | "version": "1.3.0",
4 | "description": "Laravel plugin for Vite.",
5 | "keywords": [
6 | "laravel",
7 | "vite",
8 | "vite-plugin"
9 | ],
10 | "homepage": "https://github.com/laravel/vite-plugin",
11 | "repository": {
12 | "type": "git",
13 | "url": "https://github.com/laravel/vite-plugin"
14 | },
15 | "license": "MIT",
16 | "author": "Laravel",
17 | "type": "module",
18 | "exports": {
19 | ".": {
20 | "types": "./dist/index.d.ts",
21 | "default": "./dist/index.js"
22 | },
23 | "./inertia-helpers": {
24 | "types": "./inertia-helpers/index.d.ts",
25 | "default": "./inertia-helpers/index.js"
26 | }
27 | },
28 | "types": "./dist/index.d.ts",
29 | "files": [
30 | "/dist",
31 | "/inertia-helpers"
32 | ],
33 | "bin": {
34 | "clean-orphaned-assets": "bin/clean.js"
35 | },
36 | "scripts": {
37 | "build": "npm run build-plugin && npm run build-inertia-helpers",
38 | "build-plugin": "rm -rf dist && npm run build-plugin-types && npm run build-plugin-esm && cp src/dev-server-index.html dist/",
39 | "build-plugin-types": "tsc --emitDeclarationOnly",
40 | "build-plugin-esm": "esbuild src/index.ts --platform=node --format=esm --outfile=dist/index.js",
41 | "build-inertia-helpers": "rm -rf inertia-helpers && tsc --project tsconfig.inertia-helpers.json",
42 | "lint": "eslint --ext .ts ./src ./tests",
43 | "test": "vitest run"
44 | },
45 | "devDependencies": {
46 | "@types/node": "^18.11.9",
47 | "@typescript-eslint/eslint-plugin": "^5.21.0",
48 | "@typescript-eslint/parser": "^5.21.0",
49 | "esbuild": "0.16.10",
50 | "eslint": "^8.14.0",
51 | "typescript": "^4.6.4",
52 | "vite": "^6.0.0",
53 | "vitest": "^0.34.4"
54 | },
55 | "peerDependencies": {
56 | "vite": "^5.0.0 || ^6.0.0"
57 | },
58 | "engines": {
59 | "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
60 | },
61 | "dependencies": {
62 | "picocolors": "^1.0.0",
63 | "vite-plugin-full-reload": "^1.1.0"
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/dev-server-index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | This is the Vite development server that provides Hot Module Replacement for your Laravel application.
51 |To access your Laravel application, you will need to run a local development server.
52 |Laravel's local development server powered by PHP's built-in web server.
54 |A light-weight command-line interface for interacting with Laravel's default Docker development environment.
56 |
59 | Your Laravel application's configured APP_URL is:
60 | {{ APP_URL }}
61 |
Want more information on Laravel's Vite integration?
63 |64 | Read the docs → 65 |
66 |