Integration for a Vue 3 island
What does this MR do and why?
The MR introduces the Vue 3 integration point for Duo UI Next.
This merge request introduces a new Vue 3 integration point that runs alongside the existing monolith. The changes create a separate, scoped Vue 3 application in a new vue3-apps
folder with its own build system, then integrate it into the main application as a custom web component called <duo-next>
. For now, the <duo-next>
is just a standard Vue 3 application without any Duo content. The point of the MR is specifically the integration itself, not the content of the integration.
The integration is protected with the vue3_island
feature flag.
The implementation includes all the necessary build configuration to compile the Vue 3 app into a JavaScript file that gets loaded into the main application. The existing chat interface remains unchanged and continues to work when the feature flag is disabled, making this a safe, gradual migration approach.
The MR has well-split commits to review the evolution of the integration and for easier review.
References
References Introduce the Vue3 integration point for Duo UI... (#568101 - closed)
Screenshots or screen recordings
The Vue 3 application is available only when the chat is in the Agentic mode
With the flag OFF | With the flag ON |
---|---|
![]() |
![]() |
How to set up and validate locally
- Ensure GitLab Duo is setup
- Build the frontend island with
$ scripts/build_frontend_islands
- In rails console enable the feature flag
Feature.enable(:duo_ui_next)
- Visit any project with Duo enabled
- Click the
Open GitLab Duo Chat
button at the top right or just clickd
keystroke - The panel of GitLab Duo Chat should be opened but with the Vue 3 application in it
NB: Keep in mind that the app isn't meant to be functional just now - it will evolve to contain Duo Chat with Duo UI Next components as the next step.
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.