Moving old project using Laravel Mix to Vite

Last Updated 08 July 2022

Getting Started

Vite is the new front-end tooling for Laravel. Starting from Laravel version 9.19, the framework has chosen to replace its front-end asset management tool Mix with the top-rated tool Vite.

Remove Laravel Mix

We need to remove Laravel Mix as we don't need it anymore. We also remove Laravel Mix config file webpack.mix.js which location in your project root

npm remove laravel mix && rm -rf webpack.mix.js

Install Vite and Laravel Vite plugin

Now you can run command below to install vite and laravel-vite-plugin plugin. You have to specific --save-dev to save both vite and laravel-vite-plugin plugin into package.json file.

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

Configure Vite

create vite config file in your project root called vite.config.js with the content as show below.

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

Update Build Script

The build script need to changed with vite. Now Let update your package.json with code below.

{
    "private": true,
    "scripts": {
       "dev": "vite",
       "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.3.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^2.9.14"
    }
}

Importing JS Modules

Vite can only support ES Modules, so any cases where you’re using the require() method in your Javascript now needs to be replaced with an import.

• Update your file resources/js/app.js

window._ = require('lodash'); // Remove this line
import _ from 'lodash'; // add this line
window._ = _;    // add this line

• Update your axios import

window.axios = require('axios'); // remove this line
import axios from 'axios'; // add this line
window.axios = axios;    // add this line

• Update your file resources/js/bootstrap.js

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" // remove this line
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" // remove this line
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}" // add this line
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" // add this line

Update Environment File

You have to update your .env file

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" // remove this line
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" // remove this line
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}" // add this line
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" // add this line

Use new Vite directive

Starting from Laravel 9.19, you can use new blade directive which use to replace your old way to include css and javascript. you can remove your existing include css and js and using the code below

@vite('['resourece/css/app.css', 'resources/js/app.js'])

Running vite in Local

You can run the scripts npm run dev

Running vite for production

You can run your deployment script npm run build

• Everything should work as normal, please share this posts If it's helpful to you.