Migrating laravel-mix to vitejs

Hello!

I am trying to convert my Laravel 9 project's front-end bundling. it was an old project and I'm pretty sure that laravel 9 has a documentation of laravel-mix before. but when I checked it today, it was replaced with vite.

I'm having trouble migrating my scripts into Vite since it bundles everything into one file. My project setup looks like that I have a separate bundle for the admin which uses TALL stack and on the app itself, it's using vue for its SPA.

here's what my webpack.mix.js look like

const mix = require('laravel-mix');
require("dotenv").config();


mix.scripts([
	'node_modules/select2/dist/js/select2.min.js',
	'resources/vendor/bootstrap/transition.js',
	'resources/vendor/bootstrap/modal.js',
	'resources/vendor/bootstrap/alert.js',
	'resources/js/components/_alert.js',
	'resources/js/components/_datatable.js',
	'resources/js/components/_panel-form.js',
	'resources/js/components/_select.js',
	'resources/js/components/_edit-toggler.js',
	'resources/js/admin/app.js'
], 'public/js/admin.js')
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/admin/admin.scss', 'public/css')
.postCss('resources/css/app.css', 'public/css', [
	require('postcss-import'),
	require('tailwindcss'),
	require('autoprefixer'),
])
.options({
	processCssUrls: false
})

// SPA styles and scripts
mix.sass('resources/sass/app/app.scss', 'css/spa.css')
	.ts('resources/ts/app.ts', 'js/spa.js')
	.vue()
	.disableNotifications()

and here's what my vite.config.js looks like

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
 
export default defineConfig({
	plugins: [
		laravel([
			'resources/css/app.css',
			'resources/js/app.js',
		]),
		vue({
			template: {
				transformAssetUrls: {
					base: null,
					includeAbsolute: false,
				},
			},
		}),
	],
});

LaryAI

2 years ago

Level 58

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

Install Vite and its plugins:

npm install vite @vitejs/plugin-vue laravel-vite-plugin --save-dev

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

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    laravel(),
    vue(),
  ],
});

Update your webpack.mix.js file to remove all the bundling and compilation tasks, and only keep the asset copying tasks:

const mix = require('laravel-mix');
require('dotenv').config();

mix.copy('resources/css/app.css', 'public/css')
  .copy('resources/js/app.js', 'public/js');

Update your app.blade.php file to use the new asset paths:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

Test your application to make sure everything works as expected.

Note: If you have multiple entry points, you can use the vite-plugin-multi-entry plugin to handle them.

Please or to participate in this conversation.