Hi all,

Shot in the dark. I was wondering if it's possible to replace Mix with Vite in such a way that it's only being used as a bundler and doesn't use the @vite directive?

My project is a monolith and has multiple JS files that are by themselves Vue apps. So at the moment I'm using Mix to map the input/output like so:

.js('resources/js/client/quotation.js', 'public/js/client')

My current Vite setup is:

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2'
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    build: {
        outDir: path.resolve(__dirname, 'public'),
        emptyOutDir: false,
        rollupOptions: {
            output: {
                entryFileNames: 'js/[name].js',
                assetFileNames: 'css/[name].css',
            },
        },
    },
    resolve: {
        alias: {
            '@': path.join(__dirname, 'resources/js'),
            '~': path.join(__dirname, 'resources/sass'),
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/sass/admin.scss',
                'resources/js/app.js',
                'resources/js/admin/realtime_alerting/realtime_alerting_dashboard.js',
                'resources/js/common/realtime_alerting/realtime_alerting_edit.js'
            ],
            refresh: true
        }),
        createVuePlugin()
    ],
});

This is then compiling these various files into production ready files:

https://gyazo.com/c4ed72f538935c7e396484a864ab670b

public/manifest.json                               0.96 KiB
public/js/app.js                                   0.02 KiB / gzip: 0.04 KiB
public/css/realtime_alerting_edit.css              3.47 KiB / gzip: 1.12 KiB
public/css/realtime_alerting_dashboard.css         0.41 KiB / gzip: 0.21 KiB
public/css/vueComponentNormalizer.css              4.38 KiB / gzip: 1.34 KiB
public/css/admin.css                               61.99 KiB / gzip: 11.75 KiB
public/js/realtime_alerting_edit.js                141.12 KiB / gzip: 44.58 KiB
public/js/realtime_alerting_dashboard.js           575.73 KiB / gzip: 176.65 KiB
public/assets/vueComponentNormalizer.91ca281a.js   988.54 KiB / gzip: 275.28 KiB

I can then reference them like so in a blade file:

@section('footer')
    <script type="module" src="/core/public/js/realtime_alerting_dashboard.js"></script>
@endsection

However you can see that some of them are still being cache-busted and strangely some JS files are being converted into CSS files. I gather I've either got a config issue here or that someone will tell me this just isn't possible using Vue 2 & Laravel 7.

Any help would be very appreciated.