Skip to content

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
Screenshot_2025-09-08_at_16.28.44 Screenshot_2025-09-08_at_16.28.25

How to set up and validate locally

  1. Ensure GitLab Duo is setup
  2. Build the frontend island with
    $ scripts/build_frontend_islands
  3. In rails console enable the feature flag
    Feature.enable(:duo_ui_next)
  4. Visit any project with Duo enabled
  5. Click the Open GitLab Duo Chat button at the top right or just click d keystroke
  6. 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.

Edited by Denys Mishunov

Merge request reports

Loading