Moving old project using Laravel Mix to Vite
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.

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 lineimport _ from 'lodash'; // add this linewindow._ = _; // add this line
- Update your
axios
import
window.axios = require('axios'); // remove this lineimport axios from 'axios'; // add this linewindow.axios = axios; // add this line
- Update your file
resources/js/bootstrap.js
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" // remove this lineMIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" // remove this lineVITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}" // add this lineVITE_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 lineMIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" // remove this lineVITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}" // add this lineVITE_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.