diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 9a0442e2afe3765f424d15f25423537b9091a3cb..6637904d87d8a6c78e0deaa5b3b07651fcaf2f51 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -1,6 +1,6 @@
 <script>
 import Sortable from 'vendor/Sortable';
-import boardNewIssue from './board_new_issue';
+import boardNewIssue from './board_new_issue.vue';
 import boardCard from './board_card.vue';
 import eventHub from '../eventhub';
 import loadingIcon from '../../vue_shared/components/loading_icon.vue';
diff --git a/app/assets/javascripts/boards/components/board_new_issue.js b/app/assets/javascripts/boards/components/board_new_issue.vue
similarity index 58%
rename from app/assets/javascripts/boards/components/board_new_issue.js
rename to app/assets/javascripts/boards/components/board_new_issue.vue
index bc28f7f45f46381b108cc04e8524c2917ee5959d..efface7143d694cf5778efd12e0dcb2dae4b96a6 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.js
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -1,5 +1,6 @@
-/* global ListIssue */
+<script>
 import eventHub from '../eventhub';
+import ListIssue from '../models/issue';
 
 const Store = gl.issueBoards.BoardsStore;
 
@@ -17,6 +18,9 @@ export default {
       error: false,
     };
   },
+  mounted() {
+    this.$refs.input.focus();
+  },
   methods: {
     submit(e) {
       e.preventDefault();
@@ -59,42 +63,51 @@ export default {
       eventHub.$emit(`hide-issue-form-${this.list.id}`);
     },
   },
-  mounted() {
-    this.$refs.input.focus();
-  },
-  template: `
-    <div class="card board-new-issue-form">
-      <form @submit="submit($event)">
-        <div class="flash-container"
-          v-if="error">
-          <div class="flash-alert">
-            An error occurred. Please try again.
-          </div>
-        </div>
-        <label class="label-light"
-          :for="list.id + '-title'">
-          Title
-        </label>
-        <input class="form-control"
-          type="text"
-          v-model="title"
-          ref="input"
-          autocomplete="off"
-          :id="list.id + '-title'" />
-        <div class="clearfix prepend-top-10">
-          <button class="btn btn-success pull-left"
-            type="submit"
-            :disabled="title === ''"
-            ref="submit-button">
-            Submit issue
-          </button>
-          <button class="btn btn-default pull-right"
-            type="button"
-            @click="cancel">
-            Cancel
-          </button>
-        </div>
-      </form>
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="card board-new-issue-form">
+    <form @submit="submit($event)">
+      <div
+        class="flash-container"
+        v-if="error"
+      >
+        <div class="flash-alert">
+          An error occurred. Please try again.
+        </div>
+      </div>
+      <label
+        class="label-light"
+        :for="list.id + '-title'"
+      >
+        Title
+      </label>
+      <input
+        class="form-control"
+        type="text"
+        v-model="title"
+        ref="input"
+        autocomplete="off"
+        :id="list.id + '-title'"
+      />
+      <div class="clearfix prepend-top-10">
+        <button
+          class="btn btn-success pull-left"
+          type="submit"
+          :disabled="title === ''"
+          ref="submit-button"
+        >
+          Submit issue
+        </button>
+        <button
+          class="btn btn-default pull-right"
+          type="button"
+          @click="cancel"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js
index 81edd95bf2ba336c28cd46bb1d2a60352bda09b7..3bfb6d39ad515e238376b6cc15b3edc22119a79f 100644
--- a/app/assets/javascripts/boards/models/issue.js
+++ b/app/assets/javascripts/boards/models/issue.js
@@ -110,3 +110,5 @@ class ListIssue {
 }
 
 window.ListIssue = ListIssue;
+
+export default ListIssue;
diff --git a/changelogs/unreleased/refactor-move-board-new-issue-vue-component.yml b/changelogs/unreleased/refactor-move-board-new-issue-vue-component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..20d055305136e5c9f1e66adc2e752ba1318b09d8
--- /dev/null
+++ b/changelogs/unreleased/refactor-move-board-new-issue-vue-component.yml
@@ -0,0 +1,5 @@
+---
+title: Move BoardNewIssue vue component
+merge_request: 16947
+author: George Tsiolis
+type: performance
diff --git a/spec/javascripts/boards/board_new_issue_spec.js b/spec/javascripts/boards/board_new_issue_spec.js
index e204985f039da890a7476630efc5102ffded9c6d..d5fbfdeaa9108aa38b55338d6edc3c70c3612a92 100644
--- a/spec/javascripts/boards/board_new_issue_spec.js
+++ b/spec/javascripts/boards/board_new_issue_spec.js
@@ -4,7 +4,7 @@
 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import boardNewIssue from '~/boards/components/board_new_issue';
+import boardNewIssue from '~/boards/components/board_new_issue.vue';
 
 import '~/boards/models/list';
 import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';