Upgrade/migrate from Laravel Mix to Vite

Question

I use Laravel, and I upgraded Laravel to 10. Now, I want to replace Webpack with Vite, too. I do formal steps, and I stick to one step. In my case, my Webpack config is like this:

const mix = require('laravel-mix');

mix
.js('resources/js/app.js', 'public/tmp/app.js').vue()
.scripts([
    'public/tmp/app.js',
    'resources/vuexy-assets/vendors/js/extensions/dropzone.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/datatables.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/datatables.buttons.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/dataTables.select.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js',
    'resources/vuexy-assets/vendors/js/charts/apexcharts.min.js',
    'resources/vuexy-assets/js/core/app-menu.min.js',
    'resources/vuexy-assets/js/core/app.min.js',
    'resources/vuexy-assets/js/scripts/components.min.js',
    'resources/vuexy-assets/js/scripts/footer.min.js',
    'resources/vuexy-assets/js/scripts/extensions/toastr.min.js',
    'resources/vuexy-assets/vendors/js/extensions/toastr.min.js',
    'resources/vuexy-assets/js/scripts/ui/data-list-view.min.js',
    'node_modules/sweetalert2/dist/sweetalert2.all.min.js',
], 'public/js/app.js')
    
.styles([
    'resources/vuexy-assets/vendors/css/vendors-rtl.min.css',
    'resources/vuexy-assets/css-rtl/bootstrap.min.css',
    'resources/vuexy-assets/css-rtl/bootstrap-extended.min.css',
    'resources/vuexy-assets/css-rtl/pages/data-list-view.min.css',
    'resources/vuexy-assets/css-rtl/components.min.css',
    'resources/vuexy-assets/css-rtl/themes/semi-dark-layout.min.css',
    'resources/vuexy-assets/css-rtl/core/menu/menu-types/vertical-menu.min.css',
    'resources/vuexy-assets/css-rtl/custom-rtl.min.css',
    'resources/vuexy-assets/css-rtl/plugins/extensions/toastr.min.css',
    'resources/vuexy-assets/css-rtl/pages/app-chat.min.css',
    'resources/vuexy-assets/vendors/css/tables/datatable/datatables.min.css',
    'resources/vuexy-assets/css-rtl/colors.min.css',
    'resources/vuexy-assets/vendors/css/extensions/toastr.css',
    'resources/vuexy-assets/vendors/css/charts/apexcharts.css',
    'resources/css/videojs.css',
], 'public/css/app.css');

The Webpack processed resources/js/app.js into public/tmp/app.js and then converted all my JS files into one file without extra changes on other JS files. Also, for CSS files, it combined all CSS files into one file. Now I want to convert this to vite config file to do that.

Answer 1

To migrate from Laravel Mix to Vite, you need to follow these steps:

1. Install Vite and the Laravel Vite plugin as dev dependencies in your project:

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

2. Create a vite.config.js file in your project root:

// vite.config.js
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 your package.json scripts:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

4. Remove the use of Laravl Mix's @mix() tags in your layouts and instead use @vite to reference your assets:

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

5. Run the build command:

npm run build

This will create a dist directory with your built assets.

Please note that Vite does not support combining multiple JS or CSS files into one file like Laravel Mix does. You will need to import your JS and CSS files in your app.js file or in your Vue components. Also, you have to convert any existing JavaScript require statements to import.

For example, in your app.js file:

import 'resources/vuexy-assets/vendors/js/extensions/dropzone.min.js'
import 'resources/vuexy-assets/vendors/js/tables/datatable/datatables.min.js'
// import other JS files...

import 'resources/vuexy-assets/vendors/css/vendors-rtl.min.css'
import 'resources/vuexy-assets/css-rtl/bootstrap.min.css'
// import other CSS files...

6. Finally, you can delete your webpack.mix.js file and also remove Laravel Mix:

npm remove laravel-mix

Also, note that Vite has a different way of handling assets. You might need to adjust your asset paths or move your assets to the public directory. Check the Vite documentation for more details.