Vue 3 migration: projects.merge_requests.rapid_diffs

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Goal

Migrate the projects.merge_requests.rapid_diffs page entrypoint to Vue 3 (via @vue/compat), behind a feature flag, using the recommended vue3_migration.yml flow.

Parent epic: gitlab-org#23167

Entrypoint

• ~/pages/projects/merge_requests/rapid_diffs/index.js

This entrypoint lives only in CE.

Suggested feature flag

vue3_migrate_mr_rapid_diffs (naming convention is vue3_migrate_<page>).

Steps

Full reference: https://docs.gitlab.com/development/fe_guide/vue3_migration/#option-1-recommended-migrate-your-page-entrypoint-using-a-feature-flag-and-vue3_migrationyml Example migration MR: !247789 (merged)

1. Create the feature flag file under config/feature_flags/ (see the example MR for the exact YAML shape). The migration mechanism uses the current user as the actor.
2. Create a vue3_migration.yml next to the entrypoint's index.js, declaring status: rollout and the feature flag name:

# ~/pages/projects/merge_requests/rapid_diffs/vue3_migration.yml
status: rollout
feature_flag: vue3_migrate_mr_rapid_diffs

Add it at these path(s):

• ~/pages/projects/merge_requests/rapid_diffs/vue3_migration.yml

3. Restart Vite: gdk restart vite (Vite builds its page entry map at startup, so a newly added entrypoint is not served until restart).
4. Enable the feature flag locally and load the page.
5. Confirm the console logs [gitlab] [V] Using Vue.js 3 (with @vue/compat) for <app name>.
6. Confirm document.querySelectorAll('[data-gitlab-vue3-app]') returns this page's app(s).
7. Smoke test the page's key workflows under Vue 3.
8. Open an MR and assign it to @mrincon, @xanf, or @ntepluhina for review. Questions go to #vue3_migration.
9. After the flag is fully rolled out and removed, change the YAML to status: migrated and delete the feature_flag line.

Done when

• vue3_migration.yml added for every index.js of this entrypoint (CE and EE where both exist), with status: rollout and a feature flag.
• Feature flag file created.
• Page verified running under Vue 3 locally (console marker + data-gitlab-vue3-app).
• Key workflows smoke tested.
• Migration MR merged.

Notes

• If this page's index.js mounts multiple independent apps owned by different teams (common for settings pages), Option 1 may be too wide; use the ?vue3 partial approach instead (see the docs, Option 2).
• Dashboard: https://vue3-migration-dashboard-0afc95.gitlab.io/