Multiple Vue versions in one Laravel app?

[NicolasReibnitz]

• Laravel Mix Version: 6.0.31 (npm list --depth=0)
• Node Version (node -v): v14.16.0
• NPM Version (npm -v): v7.24.0
• OS: macOS BigSur v11.6

Description:

In order to progressively update a rather large Laravel app from vue2 to vue3 (including all the depending packages that need updating, like Quasar), I would like to mix different Vue versions in one Laravel Mix setup.

I thought something along the lines of:

mix.js('resources/js/legacy-app-part-a.js', 'public/js').vue({ version: 2 });
mix.js('resources/js/legacy-app-part-b.js', 'public/js').vue({ version: 2 });
mix.js('resources/js/modern-app-part-a.js', 'public/js').vue({ version: 3 });
...

Maybe using an alias like so?

mix.webpackConfig({
    resolve: {
        alias: {
            vue2: 'vue@^2',
            ...

Not sure if this is possible, but I can't see how I could update all the different parts of the web app at once without having to completely stop any feature development or fixes for the foreseeable future.

Any ideas or insights are much appreciated! Thanks a bunch!

[binotaliu]

You can use 2 separate webpack.mix.js config file with separated package.json for different vue version.

Pass the configuration file name with --mix-config:

npx mix --mix-config=mix/old.mix.js

Generate mix-manifest.json to different location using publicPath so it won't be replaced, or use https://github.com/KABBOUCHI/laravel-mix-merge-manifest

In Laravel, you can pass a second argument to mix(), it's the location of the mix-manifest file, if you decide to output multiple manifest files.

// dist/old/mix-manifest.json
mix('js/app.js', 'dist/old');

[NicolasReibnitz]

Sorry for my late reply and thanks for your suggestions!

This is basically what I ended up doing. Only I didn't know about the merge-manifest package. I wrote a little shell script instead.

I do remember that the second argument thing didn't work in Laravel. But I can't remember what happened. That's why I can only work on one part of my project at a time. But I'll look into the package you've suggested!

Thanks!

[3zzy]

@binotaliu I created sub packages as NPM workspaces with their own package.json and webpack.mix.js however for the Vue 3 build it still seems to use the vue-loader from the node_modules in the root instead of the package root.

Module build failed (from ../node_modules/vue-loader/lib/loaders/templateLoader.js):
SyntaxError: Unexpected token (1:330)

@NicolasReibnitz How did you end up resolving this?

[NicolasReibnitz]

Hmm... it's been a while. And unfortunately, I don't really have the time to dissect it all right now. But I made a quick & dirty repo of the main files involved. I'm sure you can find some clues there. Just let me know if anything is missing or needs explaining!

If I only had more time I'd try to squeeze Vite in there. Or even better: decouple the front end from the project entirely.

https://github.com/NicolasReibnitz/laravel-mix-w-two-vue-frontends

P.S. This article provided some helpful pointers: https://www.dreamonkey.com/en/blog/how-to-setup-a-pwa-with-quasar-and-laravel/