How to Migrate from Laravel Mix to Vite

Laravel creates an admin panel from scratch — Part 14

Laravel Vite

The laravel team announced that Vite is now the default frontend asset bundler. Also, the Laravel team launched the official vite-plugin

Why Vite

Vite is a new breed of frontend build tool that provides an extremely fast development environment and bundles your code for production. The official why vite document has in-depth details.

Migrating from Laravel Mix to Vite

We going to migrate our Basic admin panel from Laravel Mix to Vite. The migration involved the below steps. The official Laravel Vite plugin includes an in-depth migration guide.

• 1. Install Vite and the Laravel Plugin
• 2. Configure Vite
• 3. Update NPM scripts
• 4. Replace require to import
• 5. Update environment variables
• 6. Replace mix() with @vite
• 7. Remove Laravel Mix
• 8. Configure Tailwind
• 9. Using Sail
• 10. Clear cache
• 11. Hot Refresh

1. Install Vite and the Laravel Plugin

First, you will need to install Vite and the Laravel Vite Plugin using your npm

npm install --save-dev vite laravel-vite-plugin

If you using Vue or react, additional Vite plugins need to install for your project

npm install --save-dev @vitejs/plugin-vue
npm install --save-dev @vitejs/plugin-react

2. Configure Vite

Create a vite.config.js file in the root of your project

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
    plugins: […