1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/javascripts/feature_flags/index.js b/app/assets/javascripts/feature_flags/index.js
new file mode 100644
index 00000000000..90857c5f2da
--- /dev/null
+++ b/app/assets/javascripts/feature_flags/index.js
@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import FeatureFlagsComponent from '~/feature_flags/components/feature_flags.vue';
+import csrf from '~/lib/utils/csrf';
+
+export default () =>
+  new Vue({
+    el: '#feature-flags-vue',
+    components: {
+      FeatureFlagsComponent,
+    },
+    data() {
+      return {
+        dataset: document.querySelector(this.$options.el).dataset,
+      };
+    },
+    provide() {
+      return {
+        projectName: this.dataset.projectName,
+        featureFlagsHelpPagePath: this.dataset.featureFlagsHelpPagePath,
+        errorStateSvgPath: this.dataset.errorStateSvgPath,
+      };
+    },
+    render(createElement) {
+      return createElement('feature-flags-component', {
+        props: {
+          endpoint: this.dataset.endpoint,
+          projectId: this.dataset.projectId,
+          featureFlagsClientLibrariesHelpPagePath: this.dataset
+            .featureFlagsClientLibrariesHelpPagePath,
+          featureFlagsClientExampleHelpPagePath: this.dataset.featureFlagsClientExampleHelpPagePath,
+          unleashApiUrl: this.dataset.unleashApiUrl,
+          unleashApiInstanceId: this.dataset.unleashApiInstanceId || '',
+          csrfToken: csrf.token,
+          canUserConfigure: this.dataset.canUserAdminFeatureFlag,
+          newFeatureFlagPath: this.dataset.newFeatureFlagPath,
+          rotateInstanceIdPath: this.dataset.rotateInstanceIdPath,
+          newUserListPath: this.dataset.newUserListPath,
+        },
+      });
+    },
+  });