How to Migrate from Laravel Mix to Vite
Tags: webdev, laravel, php, javascript
Published: 2022-07-04 11:57:36

---
title: How to Migrate from Laravel Mix to Vite
published: true
date: 2022-07-03 14:39:33 UTC
tags: webdev,laravel,php,javascript
canonical_url: https://balajidharma.medium.com/how-to-migrating-from-laravel-mix-to-vite-fbb912237844
---

#### Laravel creates an admin panel from scratch — Part 14

![](https://cdn-images-1.medium.com/max/904/1*M6DXxGxUH92qBvZZzAIeRA.png)
_Laravel Vite_

Laravel team announced that [Vite](https://vitejs.dev/) is now the default frontend asset bundler. Also, the Laravel team launched the official [vite-plugin](https://github.com/laravel/vite-plugin)

{% tweet 1541795873838989314 %}

### 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](https://vitejs.dev/guide/why.html) 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](https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-laravel-mix-to-vite).

- 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](https://vitejs.dev/) and the [Laravel Vite Plugin](https://www.npmjs.com/package/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: [
        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](https://github.com/laravel/laravel/pull/5895/files) 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'
    - '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](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](https://github.com/balajidharma/basic-laravel-admin-panel) from Laravel Mix to Vite.

The Laravel admin panel is available on [https://github.com/balajidharma/basic-laravel-admin-panel](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_**](https://balajidharma.medium.com/).

Previous part — Part 13: [Implement Delete Confirmation in Laravel CRUD](https://dev.to/balajidharma/implement-delete-confirmation-in-laravel-crud-k6l-temp-slug-4108219)

Next part — Part 15: Coming soon