DEV Community

Balaji Dharma
Balaji Dharma

Posted on • Originally published at balajidharma.Medium on

How to Migrate from Laravel Mix to Vite

Laravel creates an admin panel from scratch — Part 14


Laravel Vite

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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',
        ]),
    ],
});
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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}"
Enter fullscreen mode Exit fullscreen mode

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,
Enter fullscreen mode Exit fullscreen mode

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 and 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'
    - '5173:5173'

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

Also, configure Vite to listen to 0.0.0.0

If you are using Windows with WSL, 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',
        ]),
    ],
});

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

The Laravel admin panel is available on https://github.com/balajidharma/basic-laravel-admin-panel. Install the admin panel and share your feedback.

Thank you for reading.

Stay tuned for more!

Follow me at balajidharma.medium.com.

Previous part — Part 13: Implement Delete Confirmation in Laravel CRUD

Next part — Part 15: Coming soon

Discussion (0)