diff --git a/app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6
new file mode 100644
index 0000000000000000000000000000000000000000..46cbf706d972da255f3b73209f4de67369e54854
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6
@@ -0,0 +1,54 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueBranchCommit = Vue.extend({
+    props: ['pipeline', 'shortsha'],
+    template: `
+      <div class="icon-container">
+        <i class="fa fa-code-fork"></i>
+        </div>
+        <!--
+          I need to know which branch things are comming from
+        -->
+        <a class="monospace branch-name" href="./commits/master">master</a>
+        <div class="icon-container commit-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+          <path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"></path>
+        </svg>
+      </div>
+      <a
+        class="commit-id monospace"
+        href="./commit/{{pipeline.sha}}">{{shortsha(pipeline)}}
+      </a>
+      <p class="commit-title">
+        <a
+          href="mailto:james@jameslopez.es"
+        >
+          <!--
+            need Author Name
+            need Plural Version of Author Name: Rails has this built in
+            need gravatar HASH for author
+            need authors email
+          -->
+          <img
+            class="avatar has-tooltip s20 hidden-xs"
+            alt="James Lopez's avatar"
+            title="James Lopez"
+            data-container="body"
+            src="http://www.gravatar.com/avatar/80d3b651b4be1f1db39435c2d11f1f23?s=40&amp;d=identicon"
+          >
+        </a>
+        <a
+          class="commit-row-message"
+          href="./commit/{{pipeline.sha}}"
+        >
+          <!--
+            need commit message/title for SHA
+          -->
+          fix broken repo 500 errors in UI and added relevant specs
+        </a>
+      </p>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6
index 4450fde4103657b0ee50661cfbade5fc1e6e1709..14a4a5d9b1dd2df448f13a3d0813b509dc452005 100644
--- a/app/assets/javascripts/vue_pipelines_index/index.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6
@@ -8,6 +8,7 @@
 //= require ./running.vue.js.es6
 //= require ./stages.vue.js.es6
 //= require ./pipeline_actions.vue.js.es6
+//= require ./branch_commit.vue.js.es6
 //= require ./pipelines.vue.js.es6
 
 (() => {
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6
index 16da8b8f42372314526a42f0492d70154ad40a14..0b1c2c33ca004f1e440148ad52817a0cdc4ab907 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6
@@ -7,6 +7,7 @@
       'vue-running-pipeline': gl.VueRunningPipeline,
       'vue-stages': gl.VueStages,
       'vue-pipeline-actions': gl.VuePipelineActions,
+      'vue-branch-commit': gl.VueBranchCommit,
     },
     data() {
       return {
@@ -27,7 +28,7 @@
       this.store.fetchDataLoop.call(this, Vue, this.pageNum);
     },
     methods: {
-      shortSha(pipeline) {
+      shortsha(pipeline) {
         return pipeline.sha.slice(0, 8);
       },
       changePage() {
@@ -61,50 +62,11 @@
                 <span class="api monospace">{{pipeline.user}}</span>
               </td>
               <td class="branch-commit">
-                <div class="icon-container">
-                  <i class="fa fa-code-fork"></i>
-                  </div>
-                  <!--
-                    I need to know which branch things are comming from
-                  -->
-                  <a class="monospace branch-name" href="./commits/master">master</a>
-                  <div class="icon-container commit-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
-                    <path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"></path>
-                  </svg>
-                </div>
-                <a
-                  class="commit-id monospace"
-                  href="./commit/{{pipeline.sha}}">{{shortSha(pipeline)}}
-                </a>
-                <p class="commit-title">
-                  <a
-                    href="mailto:james@jameslopez.es"
-                  >
-                    <!--
-                      need Author Name
-                      need Plural Version of Author Name: Rails has this built in
-                      need gravatar HASH for author
-                      need authors email
-                    -->
-                    <img
-                      class="avatar has-tooltip s20 hidden-xs"
-                      alt="James Lopez's avatar"
-                      title="James Lopez"
-                      data-container="body"
-                      src="http://www.gravatar.com/avatar/80d3b651b4be1f1db39435c2d11f1f23?s=40&amp;d=identicon"
-                    >
-                  </a>
-                  <a
-                    class="commit-row-message"
-                    href="./commit/{{pipeline.sha}}"
-                  >
-                    <!--
-                      need commit message/title for SHA
-                    -->
-                    fix broken repo 500 errors in UI and added relevant specs
-                  </a>
-                </p>
+                <vue-branch-commit
+                  :pipeline='pipeline'
+                  :shortsha='shortsha'
+                >
+                </vue-branch-commit>
               </td>
               <td class="stage-cell">
                 <!--
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index a7d837227d5832b117a8245513dce8a9cbcc72a0..bd649a4fa2e2e3a04ae77a1b9fa67e67a0624429 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -44,4 +44,4 @@
     - else
       .vue-pipelines-index
 
-= page_specific_javascript_tag('vue_pipelines_index/index.js')
\ No newline at end of file
+= page_specific_javascript_tag('vue_pipelines_index/index.js')