1 files changed, 20 insertions, 13 deletions
diff --git a/app/assets/javascripts/pages/groups/new/index.js b/app/assets/javascripts/pages/groups/new/index.js
index 569b5afd676..7557edb1b49 100644
--- a/app/assets/javascripts/pages/groups/new/index.js
+++ b/app/assets/javascripts/pages/groups/new/index.js
@@ -1,8 +1,9 @@
-import $ from 'jquery';
+import Vue from 'vue';
 import BindInOut from '~/behaviors/bind_in_out';
 import initFilePickers from '~/file_pickers';
 import Group from '~/group';
-import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import NewGroupCreationApp from './components/app.vue';
 import GroupPathValidator from './group_path_validator';
 
 new GroupPathValidator(); // eslint-disable-line no-new
@@ -12,15 +13,21 @@ initFilePickers();
 
 new Group(); // eslint-disable-line no-new
 
-const CONTAINER_SELECTOR = '.group-edit-container .nav-tabs';
-const DEFAULT_ACTION = '#create-group-pane';
-// eslint-disable-next-line no-new
-new LinkedTabs({
-  defaultAction: DEFAULT_ACTION,
-  parentEl: CONTAINER_SELECTOR,
-  hashedTabs: true,
-});
-
-if (window.location.hash) {
-  $(CONTAINER_SELECTOR).find(`a[href="${window.location.hash}"]`).tab('show');
+function initNewGroupCreation(el) {
+  const { hasErrors } = el.dataset;
+
+  const props = {
+    hasErrors: parseBoolean(hasErrors),
+  };
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(NewGroupCreationApp, { props });
+    },
+  });
 }
+
+const el = document.querySelector('.js-new-group-creation');
+
+initNewGroupCreation(el);