## Summary Roll out [the feature](https://gitlab.com/gitlab-org/gitlab/-/work_items/623999) currently behind the `vue3_migrate_main` feature flag. The flag moves the `main` bundle, which every page loads, to Vue 3 (`@vue/compat`). It uses `app/assets/javascripts/entrypoints/main.vue3_migration.yml`: with the flag on, the layout serves `main.vue3` instead of `main`. Introduced by https://gitlab.com/gitlab-org/gitlab/-/merge_requests/261499, on top of https://gitlab.com/gitlab-org/gitlab/-/merge_requests/261548. Apps behind the flag: - Behaviors: quick submit, toasts, global alerts, togglers, copy to clipboard, copy as GFM - User popovers and work item attribute popovers - GitLab version check badge and security patch upgrade modal - Session expiry modal - Panel resizers - EE: trial banner and SAML reload modal Shared modules that page code also uses stay on one Vue 2 copy through `INFECTION_BLOCKLIST`: tooltips, popovers, shortcuts, the global toast, the iframe and mermaid renderers, and `axios_utils`. - DRI: `mrincon` > [!note] > Process and guidance live in the docs — this issue is just the commands and a place to track the rollout. > "Rolling out" means incrementally enabling the flag on GitLab.com to validate stability — it is not the same as releasing the feature, which happens when the flag is removed. > [Feature flag controls](https://docs.gitlab.com/development/feature_flags/controls/) · [Feature flag lifecycle](https://handbook.gitlab.com/handbook/product-development/how-we-work/product-development-flow/feature-flag-lifecycle/#feature-flag-lifecycle) ## What could go wrong? - `main.js` runs on every page, so the blast radius is every page for each enabled actor. - The Vue 3 copy of a module does not share module state with its Vue 2 copy. Watch for actions that happen twice (shortcuts, toggles, toasts) or tooltips that do not hide. - With the flag on, each page downloads about 73.5 KB gzip more: the Vue 3 copies of `main`'s apps, and the Vue 3 runtime where the page does not load it already. Measured with a production Rspack build. The `vue3_runtime` cache group in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/261499 keeps one copy of the runtime. - In Webpack, a Vue 3 entry loads core-js twice until https://gitlab.com/gitlab-org/gitlab/-/merge_requests/262073 merges. With the flag on, that is every page, about 163 KB raw before minification. ## Events - [Exceptions with vue3_migrate_main:1](https://log.gprd.gitlab.net/app/discover#/?_g=(time:(from:now-1d,to:now))&_a=(index:'7092c4e2-4eb5-46f2-8305-a7da2edad090',query:(language:kuery,query:'json.exception.feature_flag_states.keyword:%22vue3_migrate_main:1%22'),columns:!(json.exception.class,json.exception.message,json.extra.workflow_id,json.meta.caller_id),sort:!(!(json.time,desc)))) - [Events with vue3_migrate_main:1](https://log.gprd.gitlab.net/app/discover#/?_g=(time:(from:now-1d,to:now))&_a=(index:'7092c4e2-4eb5-46f2-8305-a7da2edad090',query:(language:kuery,query:'json.feature_flag_states:%22vue3_migrate_main:1%22'),columns:!(json.meta.caller_id,json.feature_flag_states),sort:!(!(json.time,desc)))) - [Error rate and other graphs by modifying the examples in the Visualization Library](https://log.gprd.gitlab.net/app/visualize#/?_g=h@358d019&s=FF%20Observability) Feature Flag events are only logged by default for feature flags marked for the current or future milestones. To enable while the feature flag is active, see https://docs.gitlab.com/development/feature_flags/#logging ## Rollout Run all production `/chatops` in [`#production`](https://gitlab.slack.com/archives/C101F3796). Background: [incremental rollout process](https://docs.gitlab.com/development/feature_flags/controls/#process), [feature actors](https://docs.gitlab.com/development/feature_flags/#feature-actors). Do the steps in this order. After each production step, wait at least 15 minutes and look at the events above before you go to the next step. - [x] **Step 1: all non-production environments.** ``` /chatops gitlab run feature set vue3_migrate_main true --dev --pre --staging --staging-ref ``` - [x] **Step 2: production, `mrincon` only.** ``` /chatops gitlab run feature set --user=mrincon vue3_migrate_main true ``` - [x] **Step 3: production, `ntepluhina`, `mrincon`, `xanf`, `markrian`, `slashmanov` and `pburdette`.** ``` /chatops gitlab run feature set --user=ntepluhina,mrincon,xanf,markrian,slashmanov,pburdette vue3_migrate_main true ``` - [ ] **Step 4: production, all GitLab team members.** Recommended first: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/262073 deployed. Without it, every Webpack page loads core-js twice with the flag on. This costs bytes only, so it does not block the rollout. ``` /chatops gitlab run feature set --feature-group=gitlab_team_members vue3_migrate_main true ``` - [ ] **Step 5: production, a percentage of users.** Do the percentages in this order. - [ ] 10% ``` /chatops gitlab run feature set vue3_migrate_main 10 --actors ``` - [ ] 25% ``` /chatops gitlab run feature set vue3_migrate_main 25 --actors ``` - [ ] 50% ``` /chatops gitlab run feature set vue3_migrate_main 50 --actors ``` - [ ] **Step 6: production, all of GitLab.com.** Do the [Before global rollout](#before-global-rollout) checks first. ``` /chatops gitlab run feature set vue3_migrate_main true ``` ## Before global rollout Confirm the relevant gotchas before going to 100% — see [enabling a feature for GitLab.com](https://docs.gitlab.com/development/feature_flags/controls/#enabling-a-feature-for-gitlabcom): - [Docs + version history](https://docs.gitlab.com/development/documentation/feature_flags/) updated - [Breaking changes](https://docs.gitlab.com/development/documentation/release_notes/#deprecations-removals-and-breaking-changes) announced, if any - [Change management issue](https://handbook.gitlab.com/handbook/engineering/infrastructure-platforms/change-management/#feature-flags-and-the-change-management-process) opened, if required ## Cleanup Remove the flag once [deemed stable](https://handbook.gitlab.com/handbook/product-development/how-we-work/product-development-flow/feature-flag-lifecycle/#feature-flag-lifecycle). Set `status: migrated` in `entrypoints/main.vue3_migration.yml`, remove its `feature_flag:` line, and delete the flag definition. Then: ``` /chatops gitlab run release check <merge-request-url> <milestone> /chatops gitlab run feature delete vue3_migrate_main --dev --pre --staging --staging-ref --production ``` ## Rollback ``` /chatops gitlab run feature set vue3_migrate_main false # production /chatops gitlab run feature set vue3_migrate_main false --dev --pre --staging --staging-ref # non-production ``` <!-- claude session=de309de2-be08-45d8-9ce9-e887a14464ae posted=2026-10-14T10:03:19Z --> <!-- claude session=3a29ce1a-34f5-4130-a179-9df7cb7e304c posted=2026-10-27T08:22:42Z -->