DevelopmentLaravel

Upgrading to Laravel Vite Plugin 1.0 for Vite 5 Support

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…

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