Migrate frontend build from Laravel Mix to Vite

[dkwiebe]

Summary

The app uses Laravel Mix 6 (webpack-based), which is unmaintained. Laravel 11 ships with Vite natively. The current webpack.mix.js already suppresses several Sass deprecation warnings that Mix can't handle cleanly. Migrating to Vite removes this tech debt and provides faster HMR during development.

Implementation

1. Update package.json

• Remove: laravel-mix, resolve-url-loader
• Add: vite, laravel-vite-plugin, @vitejs/plugin-legacy (if IE11 compat is needed — likely not)

2. Create vite.config.js mirroring the current webpack.mix.js entry points:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.scss',
                'resources/css/signin.scss',
                'resources/js/activity.js',
                'resources/js/dashboard.js',
            ],
            refresh: true,
        }),
    ],
});

3. Delete webpack.mix.js

4. Update package.json scripts:

"dev": "vite",
"build": "vite build"

5. Update all Blade templates — replace mix() helper calls with @vite() directive:

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

{{-- After --}}
@vite(['resources/css/app.scss', 'resources/js/activity.js'])

6. Update .gitignore — replace /public/build (already present) and ensure /public/js/ and /public/css/ are excluded (from the compiled-assets issue).

Acceptance Criteria

• npm run dev starts Vite dev server with HMR
• npm run build produces production assets in public/build/
• All pages load correctly with the Vite-compiled assets
• No Sass deprecation warnings during build
• webpack.mix.js is deleted