Upgrading to Laravel Vite Plugin 1.0 is an essential step for Laravel developers seeking to leverage the capabilities of Vite 5. This release brings significant changes and enhancements. Here’s a concise guide to what’s new in Laravel Vite Plugin 1.0 and how to upgrade your project.

Key Features in Laravel Vite Plugin 1.0

  1. Vite 5 Support: The major highlight is the introduction of support for Vite 5, along with the removal of support for Vite versions 3 and 4.
  2. Clean Orphaned Assets: The npx clean-orphaned-assets command has been introduced, which is handy for cleaning up orphaned assets in Vite’s build directories.
  3. TLS Certificate Auto Detection: This version introduces automatic detection of TLS certificates for Valet or Herd, streamlining your development workflow.
  4. Updated Refresh Paths: The default refresh paths now include app/Livewire/**, improving the development experience for Livewire components.
  5. SSR Manifest Output: There’s now support for the output of SSR manifests in server-side rendering builds.

Notable Changes

  • Dropped CJS Build (#235): The CommonJS build format is no longer supported.
  • Updated Server HTTPS Option (#254): The boolean value for server.https in vite.config.js is dropped.
  • Node Version Support: Support for Node 14, 15, 16, 17, and 19 has been discontinued (#269).

For more details on these changes, refer to the Vite migration documentation.

Upgrade Path

  1. Update Your Dependencies: Start by updating laravel-vite-plugin and vite, along with any related Vite plugins. Ensure compatibility with Vite 5, as some plugins like @vitejs/plugin-vue and @vitejs/plugin-react require specific versions to work with it. Use the following command to update:
   npm install --save-dev vite@^5.0.0 laravel-vite-plugin@^1.0.0

Check for additional plugin updates as needed by your application.

  1. Consult Upgrade Guides: Always check the upgrade guides and changelogs for all packages you update, including the Vite migration guide.
  2. Adjust package.json: Your package.json should include "type": "module". Set this using:
   npm pkg set type=module
  1. Rename Configuration Files: If you have .js configuration files using the older CommonJS syntax, rename them to .cjs.

Following these steps will ensure a smooth transition to Laravel Vite Plugin 1.0, allowing you to enjoy the benefits and features of Vite 5 in your Laravel projects.

Sources:

https://github.com/laravel/vite-plugin/blob/1.x/UPGRADE.md

https://github.com/laravel/laravel/pull/6292/files