How to Migrate from Laravel Mix to 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-vuenpm 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: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

3. Update NPM scripts

Update your NPM scripts in package.json

"scripts": {
- "dev": "npm run development",
- "development": "mix",
- "watch": "mix watch",
- "watch-poll": "mix watch -- --watch-options-poll=1000",
- "hot": "mix watch --hot",
- "prod": "npm run production",
- "production": "mix --production"
+ "dev": "vite",
+ "build": "vite build"
}

4. Replace require to import

The Vite only supports ES modules, so if you are upgrading an existing application you will need to replace any require() statements with import. You may refer to this pull request for an example.

resources/js/app.js

-require('./bootstrap');
+import './bootstrap';
import Alpine from 'alpinejs';

resources/js/bootstrap.js

-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
/**
  * We'll load the axios HTTP library which allows us to easily issue requests
@@ -6,7 +7,8 @@ window._ = require('lodash');
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
@@ -18,11 +20,15 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// import Echo from 'laravel-echo';
-// window.Pusher = require('pusher-js');
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;

5. Update environment variables

Open your .env files and in hosting environments such as Forge to use the VITE_ prefix instead of MIX_

- MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

You will also need to update these references in your JavaScript code to use the new variable name and Vite syntax:

resources/js/bootstrap.js

-    key: process.env.MIX_PUSHER_APP_KEY,
-    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+    key: import.meta.env.VITE_PUSHER_APP_KEY,
+    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,

6. Replace mix() with @vite

We need to use the @vite Blade directive instead of the mix() helper. This will automatically detect whether you are running in serve or build mode and include all of the required <script> and <link rel="stylesheet"> for you

resources/views/layouts/app.blade.php

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-
         <!-- Scripts -->
-        <script src="{{ asset('js/app.js') }}" defer></script>
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
     </head>
     <body class="font-sans antialiased">
         <div class="min-h-screen bg-gray-100">

All the entry points should match those used in your vite.config.js.

7. Remove Laravel Mix

The Laravel Mix package can now be uninstalled

npm remove laravel-mix

And you may remove your Mix configuration file

rm webpack.mix.js

8. Configure Tailwind

We are using Tailwind, so we need to create a postcss.config.js file. Tailwind can generate this for you automatically

npx tailwindcss init -p

Or, you can create it manually:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

If you are using other PostCSS plugins, such as postcss-import, you will need to include them in your configuration.

9. Using sail

We using Sail, so we need to set it up to forward the port you are using to the container. Update ourdocker-compose.yml to add 5137 port.

ports:
    - '${APP_PORT:-80}:80'
    - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'

The development server will run inside the container. To install dependencies, use sail npm ci. Then sail run dev to start the server.

Configure Vite to listen to 0.0.0.0 if you are using Windows with WSL, also hmr a host is required. Refer to the issue https://github.com/laravel/vite-plugin/issues/49

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost',
        },
    },
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

10. Clear cache

If you get the above screen after running npm run dev Just try after clear the application cache

php artisan optimize:clear

10. Hot Refresh With Vite

The latest version Laravel vite-plugin package will do a full page reload when you edit a blade template. Also, they provided a configuration option to add files and folders.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Note: The refresh config–when set to true, the Laravel Vite plugin will refresh the page when you update a file in the following paths:

routes/**resources/views/**

You can configure your files and folders

refresh: [
    'resources/routes/**',
    'routes/**',
    'resources/views/**',
],

See more Working with Blade & Routes in the official documentation for further details on configuration options.

If you using Sail on windows try the server watch option

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true,
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

We have successfully migrated our Admin panel from Laravel Mix to Vite.