In this step-by-step tutorial, we will explore how to upgrade an existing Laravel application from Webpack to Vite for compiling front-end assets. The example project we will work on is a Laravel installation using Inertia.js, React, and TypeScript.

Step 1: Installing Laravel Vite Dependency

To install the Laravel dependency package for Vite, run the following command:

composer require innoscience/laravel-vite

Step 2: Publishing Vite Configuration

Next, publish the Vite configuration using the following command:

php artisan vendor:publish --tag=vite-config

Step 3: Installing Front-end Dependencies

Now, install the necessary front-end dependencies with the following command:

npm install --save-dev vite @vitejs/plugin-react-refresh laravel-vite @vitejs/plugin-react

Step 4: Removing Laravel Mix and Webpack

Since Vite replaces Laravel Mix and Webpack, uninstall the Laravel Mix dependency and remove the webpack.mix.js file. Before removing the Webpack configuration file, save your custom configurations for migration to the new vite.config.js file.

Step 5: Creating and Configuring the Vite File

Create a new file named vite.config.js. Inside the file, define your Laravel application entry, specify that you are using React, and add your custom configurations in the "resolve" section.

Step 6: Updating the App Blade and App.tsx Files

In the app.blade.php file, replace the Laravel Mix directives with the Vite directives. In the app.tsx file, update the createInertiaApp function to use an asynchronous callback function with the resolvePageComponent property.

Step 7: Updating TypeScript Configuration

To fix any TypeScript type mismatch errors, add a "types" section in the tsconfig.json file under "compilerOptions" and include "vite/client". Ensure that the "target" under "compilerOptions" is not set to "es5".

Step 8: Updating Package.json Scripts

Update the "scripts" section in the package.json file to use Vite instead of Laravel Mix. Replace the "dev" key to run Vite and add a "build" key to run the Vite build function.

Step 9: Configuring Tailwind CSS with Vite

Create a postcss.config.js file with the Tailwind CSS configuration. In the app.tsx file, import the app.css file as you did previously. This will enable Tailwind CSS to work with Vite.

Conclusion

By following these steps, you will have successfully migrated your Laravel application from Webpack to Vite. This will enable more efficient front-end asset compilation and improve your overall development experience.

For a more comprehensive and in-depth walkthrough on how to migrate from Webpack to Vite in a Laravel, Inertia.js, React, and TypeScript Application, we highly recommend referring to the following guide provided below.