What is Laravel Mix?

Laravel Mix is a Webpack-based asset bundler originally included in Laravel projects to simplify compiling JavaScript, CSS, Sass, and other front-end assets. However, as of Laravel, Mix is considered a legacy package and is no longer included by default. Modern Laravel applications now use Vite for fast, native ES module asset compilation.

When to Use Laravel Mix in Laravel

• Legacy Projects: Maintaining applications that were built with Mix prior to the Vite transition.
• Specific Webpack Dependencies: Projects that rely on Webpack loaders or plugins not yet compatible with Vite.

Installing Laravel Mix Manually in Laravel

If you need Mix for a Laravel project, follow these steps:

// Remove Vite (optional if already installed)
npm uninstall vite laravel-vite-plugin

// Install Laravel Mix
npm install laravel-mix --save-dev

// Create webpack.mix.js at project root
touch webpack.mix.js

Example Mix Configuration

// webpack.mix.js
let mix = require('laravel-mix');

// Compile JS and Sass
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .setPublicPath('public');

Compiling Assets with Mix

Run the following commands to compile your assets manually:

npx mix        # Development build
npx mix --production   # Production build with minification and versioning

Key Differences: Mix vs. Vite (Laravel)

Summary

Laravel Mix is primarily used for older projects or specialized Webpack setups. For all new Laravel applications, Vite is the recommended and default tool for asset bundling, offering faster builds, modern HMR, and seamless native ES module support.