Add ?vue3 infection plugin for iterative Vue 3 migration in Vite

What does this MR do and why?

Introduces a Vite plugin that enables per-entrypoint iterative Vue 3 migration. By appending ?vue3 to a JS import specifier, the entire dependency subtree becomes "infected" — Vue ecosystem packages (vue, vuex, vue-router, vue-apollo, etc.) are redirected to their Vue 3 compat wrappers, while non-Vue imports get separate module instances to ensure isolation.

This allows migrating individual page entrypoints to Vue 3 one at a time without changing the global VUE_VERSION environment variable, enabling gradual adoption.

How to set up and validate locally

  1. Ensure you have a working GDK with Vite enabled
  2. Add ?vue3 to any JS entrypoint import, e.g.:
    import initFeature from 'ee/some_feature/bundle?vue3';
  3. Run gdk start and navigate to the page using that entrypoint
  4. Open browser DevTools Network tab — infected modules should have ?vue3= in their URLs
  5. Vue ecosystem imports (vue, vuex, etc.) should resolve to vue3compat/ wrappers

Known issues:

  • vite production build (will be addressed in follow-up MR)
  • this is as dumb as possible - it will duplicate every possible module it discovers. this is intentional
  • HMR. It might or might not work 🌚

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Illya Klymov

Merge request reports

Loading