Basic Laravel 9 Course is available now! πŸŽ‰ Get your seat now

Moving old project using Laravel Mix to Vite

#laravel #tools #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.

Laravel 101 Tips and Tricks

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.