5 files changed, 82 insertions, 23 deletions
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
new file mode 100644
index 00000000000..2db9672547a
--- /dev/null
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -0,0 +1,21 @@
+<script>
+export default {
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    }    
+  }
+};
+</script>
+
+<template>
+  <tr>
+    <td>
+      <div>
+        <a :href="group.web_url">{{group.full_name}}</a>
+      </div>
+      <div>{{group.description}}</div>
+    </td>
+  </tr>
+</template>
diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
new file mode 100644
index 00000000000..341855b9915
--- /dev/null
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -0,0 +1,45 @@
+<script>
+import GroupsStore from '../stores/groups_store';
+import GroupsService from '../services/groups_service';
+import GroupItem from '../components/group_item.vue';
+
+export default {
+  components: {
+    'group-item': GroupItem,
+  },
+
+  data() {
+    const store = new GroupsStore();
+
+    return {
+      store,
+      state: store.state,
+    }
+  },
+
+  created() {
+    const appEl = document.querySelector('#dashboard-group-app');
+
+    this.service = new GroupsService(appEl.dataset.endpoint);
+    this.fetchGroups();
+  },
+
+  methods: {
+    fetchGroups() {
+      this.service.getGroups()
+        .then((response) => {
+          this.store.setGroups(response.json());
+        })
+        .catch(() => {
+          // TODO: Handler error
+        });
+    },
+  }
+};
+</script>
+
+<template>
+  <table class="table table-bordered">
+    <group-item :group="group" v-for="group in state.groups" />
+  </table>
+</template>
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index f9fe3f7f341..883e9cb4187 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -1,26 +1,16 @@
 /* eslint-disable no-unused-vars */
 
 import Vue from 'vue';
-import GroupsStore from './stores/groups_store';
-import GroupsService from './services/groups_service';
+import GroupsComponent from './components/groups.vue'
 
 $(() => {
-  const appEl = document.querySelector('.js-groups-list-holder');
-
-  const groupsStore = new GroupsStore();
-  const groupsService = new GroupsService(appEl.dataset.endpoint);
+  const appEl = document.querySelector('#dashboard-group-app');
 
   const GroupsApp = new Vue({
     el: appEl,
-    data: groupsStore,
-    mounted() {
-      groupsService.getGroups()
-        .then((response) => {
-          this.groups = response.json();
-        })
-        .catch(() => {
-          // TODO: Handle error
-        });
+    components: {
+      'groups-component': GroupsComponent
     },
+    render: createElement => createElement('groups-component'),
   });
 });
diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js
index f62f419ac1b..0e1820b7335 100644
--- a/app/assets/javascripts/groups/stores/groups_store.js
+++ b/app/assets/javascripts/groups/stores/groups_store.js
@@ -1,5 +1,14 @@
 export default class GroupsStore {
   constructor() {
-    this.groups = [];
+    this.state = {};
+    this.state.groups = [];
+
+    return this;
+  }
+
+  setGroups(groups) {
+    this.state.groups = groups;
+
+    return groups;
   }
 }
diff --git a/app/views/dashboard/groups/_groups.html.haml b/app/views/dashboard/groups/_groups.html.haml
index 9e19b6bc347..e7a5fa8ba32 100644
--- a/app/views/dashboard/groups/_groups.html.haml
+++ b/app/views/dashboard/groups/_groups.html.haml
@@ -1,7 +1 @@
-.js-groups-list-holder{ data: { endpoint: dashboard_groups_path(format: :json) } }
-  %ul.content-list
-    - @groups.each do |group|
-      - group_member = group.group_members.find_by(user_id: current_user)
-      = render 'shared/groups/group', group: group_member.group, group_member: group_member
-
-  = paginate @groups, theme: 'gitlab'
+.js-groups-list-holder#dashboard-group-app{ data: { endpoint: dashboard_groups_path(format: :json) } }