9 files changed, 133 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index 869f70e7d33..6aa41d0825b 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -46,4 +46,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
   GpgBadges.fetch();
   leaveByUrl('project');
+
+  if (document.getElementById('js-tree-list')) {
+    import('~/repository')
+      .then(m => m.default())
+      .catch(e => {
+        throw e;
+      });
+  }
 });
diff --git a/app/assets/javascripts/pages/projects/tree/show/index.js b/app/assets/javascripts/pages/projects/tree/show/index.js
index 400aed35e32..7b90a3a4f6e 100644
--- a/app/assets/javascripts/pages/projects/tree/show/index.js
+++ b/app/assets/javascripts/pages/projects/tree/show/index.js
@@ -40,4 +40,12 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   GpgBadges.fetch();
+
+  if (document.getElementById('js-tree-list')) {
+    import('~/repository')
+      .then(m => m.default())
+      .catch(e => {
+        throw e;
+      });
+  }
 });
diff --git a/app/assets/javascripts/repository/components/app.vue b/app/assets/javascripts/repository/components/app.vue
new file mode 100644
index 00000000000..98240aef810
--- /dev/null
+++ b/app/assets/javascripts/repository/components/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/app/assets/javascripts/repository/graphql.js b/app/assets/javascripts/repository/graphql.js
new file mode 100644
index 00000000000..febfcce780c
--- /dev/null
+++ b/app/assets/javascripts/repository/graphql.js
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+
+Vue.use(VueApollo);
+
+const defaultClient = createDefaultClient({});
+
+export default new VueApollo({
+  defaultClient,
+});
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
new file mode 100644
index 00000000000..00b69362312
--- /dev/null
+++ b/app/assets/javascripts/repository/index.js
@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import createRouter from './router';
+import App from './components/app.vue';
+import apolloProvider from './graphql';
+
+export default function setupVueRepositoryList() {
+  const el = document.getElementById('js-tree-list');
+  const { projectPath, ref } = el.dataset;
+
+  apolloProvider.clients.defaultClient.cache.writeData({
+    data: {
+      projectPath,
+      ref,
+    },
+  });
+
+  return new Vue({
+    el,
+    router: createRouter(projectPath, ref),
+    apolloProvider,
+    render(h) {
+      return h(App);
+    },
+  });
+}
diff --git a/app/assets/javascripts/repository/pages/index.vue b/app/assets/javascripts/repository/pages/index.vue
new file mode 100644
index 00000000000..fdbf195f0f6
--- /dev/null
+++ b/app/assets/javascripts/repository/pages/index.vue
@@ -0,0 +1,24 @@
+<script>
+import getRef from '../queries/getRef.graphql';
+
+export default {
+  apollo: {
+    ref: {
+      query: getRef,
+    },
+  },
+  data() {
+    return {
+      ref: '',
+    };
+  },
+};
+</script>
+
+<template>
+  <div>
+    <router-link :to="{ path: `/tree/${ref}/app` }">
+      Go to tree
+    </router-link>
+  </div>
+</template>
diff --git a/app/assets/javascripts/repository/pages/tree.vue b/app/assets/javascripts/repository/pages/tree.vue
new file mode 100644
index 00000000000..f51aafee775
--- /dev/null
+++ b/app/assets/javascripts/repository/pages/tree.vue
@@ -0,0 +1,15 @@
+<script>
+export default {
+  props: {
+    path: {
+      type: String,
+      required: false,
+      default: '/',
+    },
+  },
+};
+</script>
+
+<template>
+  <div>{{ path }}</div>
+</template>
diff --git a/app/assets/javascripts/repository/queries/getRef.graphql b/app/assets/javascripts/repository/queries/getRef.graphql
new file mode 100644
index 00000000000..58c09844c3f
--- /dev/null
+++ b/app/assets/javascripts/repository/queries/getRef.graphql
@@ -0,0 +1,3 @@
+query getRef {
+  ref @client
+}
diff --git a/app/assets/javascripts/repository/router.js b/app/assets/javascripts/repository/router.js
new file mode 100644
index 00000000000..b42a96a4ee2
--- /dev/null
+++ b/app/assets/javascripts/repository/router.js
@@ -0,0 +1,36 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import { joinPaths } from '../lib/utils/url_utility';
+import IndexPage from './pages/index.vue';
+import TreePage from './pages/tree.vue';
+
+Vue.use(VueRouter);
+
+export default function createRouter(base, baseRef) {
+  return new VueRouter({
+    mode: 'history',
+    base: joinPaths(gon.relative_url_root || '', base),
+    routes: [
+      {
+        path: '/',
+        name: 'projectRoot',
+        component: IndexPage,
+      },
+      {
+        path: `/tree/${baseRef}(/.*)?`,
+        name: 'treePath',
+        component: TreePage,
+        props: route => ({
+          path: route.params.pathMatch,
+        }),
+        beforeEnter(to, from, next) {
+          document
+            .querySelectorAll('.js-hide-on-navigation')
+            .forEach(el => el.classList.add('hidden'));
+
+          next();
+        },
+      },
+    ],
+  });
+}