diff --git a/app/assets/javascripts/pipelines/components/nav_controls.js b/app/assets/javascripts/pipelines/components/nav_controls.js
deleted file mode 100644
index 6aa10531034..00000000000
--- a/app/assets/javascripts/pipelines/components/nav_controls.js
+++ /dev/null
@@ -1,52 +0,0 @@
-export default {
-  props: {
-    newPipelinePath: {
-      type: String,
-      required: true,
-    },
-
-    hasCiEnabled: {
-      type: Boolean,
-      required: true,
-    },
-
-    helpPagePath: {
-      type: String,
-      required: true,
-    },
-
-    ciLintPath: {
-      type: String,
-      required: true,
-    },
-
-    canCreatePipeline: {
-      type: Boolean,
-      required: true,
-    },
-  },
-
-  template: `
-    <div class="nav-controls">
-      <a
-        v-if="canCreatePipeline"
-        :href="newPipelinePath"
-        class="btn btn-create">
-        Run Pipeline
-      </a>
-
-      <a
-        v-if="!hasCiEnabled"
-        :href="helpPagePath"
-        class="btn btn-info">
-        Get started with Pipelines
-      </a>
-
-      <a
-        :href="ciLintPath"
-        class="btn btn-default">
-        CI Lint
-      </a>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue
new file mode 100644
index 00000000000..632fc167f2b
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/nav_controls.vue
@@ -0,0 +1,54 @@
+<script>
+export default {
+  name: 'PipelineNavControls',
+  props: {
+    newPipelinePath: {
+      type: String,
+      required: true,
+    },
+
+    hasCiEnabled: {
+      type: Boolean,
+      required: true,
+    },
+
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+
+    ciLintPath: {
+      type: String,
+      required: true,
+    },
+
+    canCreatePipeline: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="nav-controls">
+    <a
+      v-if="canCreatePipeline"
+      :href="newPipelinePath"
+      class="btn btn-create">
+      Run Pipeline
+    </a>
+
+    <a
+      v-if="!hasCiEnabled"
+      :href="helpPagePath"
+      class="btn btn-info">
+      Get started with Pipelines
+    </a>
+
+    <a
+      :href="ciLintPath"
+      class="btn btn-default">
+      CI Lint
+    </a>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/navigation_tabs.js b/app/assets/javascripts/pipelines/components/navigation_tabs.js
deleted file mode 100644
index 1626ae17a30..00000000000
--- a/app/assets/javascripts/pipelines/components/navigation_tabs.js
+++ /dev/null
@@ -1,72 +0,0 @@
-export default {
-  props: {
-    scope: {
-      type: String,
-      required: true,
-    },
-
-    count: {
-      type: Object,
-      required: true,
-    },
-
-    paths: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  mounted() {
-    $(document).trigger('init.scrolling-tabs');
-  },
-
-  template: `
-    <ul class="nav-links scrolling-tabs">
-      <li
-        class="js-pipelines-tab-all"
-        :class="{ 'active': scope === 'all'}">
-        <a :href="paths.allPath">
-          All
-          <span class="badge js-totalbuilds-count">
-            {{count.all}}
-          </span>
-        </a>
-      </li>
-      <li class="js-pipelines-tab-pending"
-        :class="{ 'active': scope === 'pending'}">
-        <a :href="paths.pendingPath">
-          Pending
-          <span class="badge">
-            {{count.pending}}
-          </span>
-        </a>
-      </li>
-      <li class="js-pipelines-tab-running"
-        :class="{ 'active': scope === 'running'}">
-        <a :href="paths.runningPath">
-          Running
-          <span class="badge">
-            {{count.running}}
-          </span>
-        </a>
-      </li>
-      <li class="js-pipelines-tab-finished"
-        :class="{ 'active': scope === 'finished'}">
-        <a :href="paths.finishedPath">
-          Finished
-          <span class="badge">
-            {{count.finished}}
-          </span>
-        </a>
-      </li>
-      <li class="js-pipelines-tab-branches"
-      :class="{ 'active': scope === 'branches'}">
-        <a :href="paths.branchesPath">Branches</a>
-      </li>
-      <li class="js-pipelines-tab-tags"
-        :class="{ 'active': scope === 'tags'}">
-        <a :href="paths.tagsPath">Tags</a>
-      </li>
-    </ul>
-  `,
-};
diff --git a/app/assets/javascripts/pipelines/components/navigation_tabs.vue b/app/assets/javascripts/pipelines/components/navigation_tabs.vue
new file mode 100644
index 00000000000..d2f6d47f043
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/navigation_tabs.vue
@@ -0,0 +1,76 @@
+<script>
+export default {
+  name: 'PipelineNavigationTabs',
+  props: {
+    scope: {
+      type: String,
+      required: true,
+    },
+    count: {
+      type: Object,
+      required: true,
+    },
+    paths: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    $(document).trigger('init.scrolling-tabs');
+  },
+};
+</script>
+<template>
+  <ul class="nav-links scrolling-tabs">
+    <li
+      class="js-pipelines-tab-all"
+      :class="{ active: scope === 'all'}">
+      <a :href="paths.allPath">
+        All
+        <span class="badge js-totalbuilds-count">
+          {{count.all}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-pending"
+      :class="{ active: scope === 'pending'}">
+      <a :href="paths.pendingPath">
+        Pending
+        <span class="badge">
+          {{count.pending}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-running"
+      :class="{ active: scope === 'running'}">
+      <a :href="paths.runningPath">
+        Running
+        <span class="badge">
+          {{count.running}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-finished"
+      :class="{ active: scope === 'finished'}">
+      <a :href="paths.finishedPath">
+        Finished
+        <span class="badge">
+          {{count.finished}}
+        </span>
+      </a>
+    </li>
+    <li
+      class="js-pipelines-tab-branches"
+      :class="{ active: scope === 'branches'}">
+      <a :href="paths.branchesPath">Branches</a>
+    </li>
+    <li
+      class="js-pipelines-tab-tags"
+      :class="{ active: scope === 'tags'}">
+      <a :href="paths.tagsPath">Tags</a>
+    </li>
+  </ul>
+</template>
diff --git a/app/assets/javascripts/pipelines/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js
index 23b967b4b32..b530461837c 100644
--- a/app/assets/javascripts/pipelines/pipelines.js
+++ b/app/assets/javascripts/pipelines/pipelines.js
@@ -5,8 +5,8 @@ import pipelinesTableComponent from '../vue_shared/components/pipelines_table';
 import tablePagination from '../vue_shared/components/table_pagination.vue';
 import emptyState from './components/empty_state.vue';
 import errorState from './components/error_state.vue';
-import navigationTabs from './components/navigation_tabs';
-import navigationControls from './components/nav_controls';
+import navigationTabs from './components/navigation_tabs.vue';
+import navigationControls from './components/nav_controls.vue';
 import loadingIcon from '../vue_shared/components/loading_icon.vue';
 import Poll from '../lib/utils/poll';
 
diff --git a/spec/javascripts/pipelines/nav_controls_spec.js b/spec/javascripts/pipelines/nav_controls_spec.js
index 601eebce38a..f1697840fcd 100644
--- a/spec/javascripts/pipelines/nav_controls_spec.js
+++ b/spec/javascripts/pipelines/nav_controls_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import navControlsComp from '~/pipelines/components/nav_controls';
+import navControlsComp from '~/pipelines/components/nav_controls.vue';
 
 describe('Pipelines Nav Controls', () => {
   let NavControlsComponent;