diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index da9707549f9..fe64122a972 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -4,7 +4,7 @@ import PipelinesTableComponent from '../../vue_shared/components/pipelines_table
 import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
 import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
 import eventHub from '../../vue_pipelines_index/event_hub';
-import EmptyState from '../../vue_pipelines_index/components/empty_state';
+import EmptyState from '../../vue_pipelines_index/components/empty_state.vue';
 import ErrorState from '../../vue_pipelines_index/components/error_state';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
diff --git a/app/assets/javascripts/vue_pipelines_index/components/empty_state.js b/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
deleted file mode 100644
index 56b4858f4b4..00000000000
--- a/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
-
-export default {
-  props: {
-    helpPagePath: {
-      type: String,
-      required: true,
-    },
-  },
-
-  template: `
-    <div class="row empty-state">
-      <div class="col-xs-12">
-        <div class="svg-content">
-          ${pipelinesEmptyStateSVG}
-        </div>
-      </div>
-
-      <div class="col-xs-12 text-center">
-        <div class="text-content">
-          <h4>Build with confidence</h4>
-          <p>
-            Continous Integration can help catch bugs by running your tests automatically,
-            while Continuous Deployment can help you deliver code to your product environment.
-          </p>
-          <a :href="helpPagePath" class="btn btn-info">
-            Get started with Pipelines
-          </a>
-        </div>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/empty_state.vue b/app/assets/javascripts/vue_pipelines_index/components/empty_state.vue
new file mode 100644
index 00000000000..ba158bc4a1e
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/empty_state.vue
@@ -0,0 +1,34 @@
+<script>
+import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
+
+export default {
+  props: {
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({ pipelinesEmptyStateSVG }),
+};
+</script>
+
+<template>
+  <div class="row empty-state">
+    <div class="col-xs-12">
+      <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
+    </div>
+
+    <div class="col-xs-12 text-center">
+      <div class="text-content">
+        <h4>Build with confidence</h4>
+        <p>
+          Continous Integration can help catch bugs by running your tests automatically,
+          while Continuous Deployment can help you deliver code to your product environment.
+        </p>
+        <a :href="helpPagePath" class="btn btn-info">
+          Get started with Pipelines
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index 5575aa72d5e..19fa0a888fd 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -4,7 +4,7 @@ import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
 import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
 import TablePaginationComponent from '../vue_shared/components/table_pagination';
-import EmptyState from './components/empty_state';
+import EmptyState from './components/empty_state.vue';
 import ErrorState from './components/error_state';
 import NavigationTabs from './components/navigation_tabs';
 import NavigationControls from './components/nav_controls';
diff --git a/spec/javascripts/vue_pipelines_index/empty_state_spec.js b/spec/javascripts/vue_pipelines_index/empty_state_spec.js
index 733337168dc..2b10d54babe 100644
--- a/spec/javascripts/vue_pipelines_index/empty_state_spec.js
+++ b/spec/javascripts/vue_pipelines_index/empty_state_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import emptyStateComp from '~/vue_pipelines_index/components/empty_state';
+import emptyStateComp from '~/vue_pipelines_index/components/empty_state.vue';
 
 describe('Pipelines Empty State', () => {
   let component;