1 files changed, 40 insertions, 2 deletions
diff --git a/app/assets/javascripts/projects/compare/index.js b/app/assets/javascripts/projects/compare/index.js
index 4337eecb667..4ba4e308cd4 100644
--- a/app/assets/javascripts/projects/compare/index.js
+++ b/app/assets/javascripts/projects/compare/index.js
@@ -1,8 +1,46 @@
 import Vue from 'vue';
 import CompareApp from './components/app.vue';
+import CompareAppLegacy from './components/app_legacy.vue';
 
 export default function init() {
   const el = document.getElementById('js-compare-selector');
+
+  if (gon.features?.compareRepoDropdown) {
+    const {
+      refsProjectPath,
+      paramsFrom,
+      paramsTo,
+      projectCompareIndexPath,
+      projectMergeRequestPath,
+      createMrPath,
+      projectTo,
+      projectsFrom,
+    } = el.dataset;
+
+    return new Vue({
+      el,
+      components: {
+        CompareApp,
+      },
+      provide: {
+        projectTo: JSON.parse(projectTo),
+        projectsFrom: JSON.parse(projectsFrom),
+      },
+      render(createElement) {
+        return createElement(CompareApp, {
+          props: {
+            refsProjectPath,
+            paramsFrom,
+            paramsTo,
+            projectCompareIndexPath,
+            projectMergeRequestPath,
+            createMrPath,
+          },
+        });
+      },
+    });
+  }
+
   const {
     refsProjectPath,
     paramsFrom,
@@ -15,10 +53,10 @@ export default function init() {
   return new Vue({
     el,
     components: {
-      CompareApp,
+      CompareAppLegacy,
     },
     render(createElement) {
-      return createElement(CompareApp, {
+      return createElement(CompareAppLegacy, {
         props: {
           refsProjectPath,
           paramsFrom,