diff --git a/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js b/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js
index 86c1b0ac0f530b83cb1aa68d6908dc2b537c9c97..00443c8ea4a5c64d5a98e9e8ad555cc669597f6e 100644
--- a/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js
+++ b/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js
@@ -1,4 +1,4 @@
-import PersonalNotes from "./PersonalNotes.js";
+import PersonalNotes from "./PersonalNotes.vue";
 
 export default {
     components: {
diff --git a/aleksis/apps/alsijil/assets/components/alsijil/PersonalNotes.js b/aleksis/apps/alsijil/assets/components/alsijil/PersonalNotes.vue
similarity index 99%
rename from aleksis/apps/alsijil/assets/components/alsijil/PersonalNotes.js
rename to aleksis/apps/alsijil/assets/components/alsijil/PersonalNotes.vue
index 7f8c9450d188d00991ea36ea896356b717dbc6fa..ba1d2c3f69be901bcd0a7be5540e31edea04d879 100644
--- a/aleksis/apps/alsijil/assets/components/alsijil/PersonalNotes.js
+++ b/aleksis/apps/alsijil/assets/components/alsijil/PersonalNotes.vue
@@ -1,3 +1,118 @@
+<template>
+    <v-dialog
+      v-model="dialog"
+      max-width="600px"
+      @click:outside="cancelDialog"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <div>
+          <template v-for="personalNote in personalNotes">
+            <v-chip class="ma-1" close @click="editPersonalNote(personalNote.person.id)"
+              @click:close="removePersonalNote(personalNote.person.id)" v-if="personalNoteString(personalNote)">
+              {{ personalNote.person.fullName }}: {{ personalNoteString(personalNote) }}
+            </v-chip>
+          </template>
+        </div>
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              class="ma-1"
+              color="primary"
+              icon
+              outlined
+              v-bind="attrs"
+              v-on="on"
+              @click="createPersonalNote"
+            >
+              <v-icon>
+                mdi-plus
+              </v-icon>
+            </v-btn>
+          </template>
+          <span v-text="$root.django.gettext('Add personal note')"></span>
+        </v-tooltip>
+      </template>
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Personal Note</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-select
+              item-text="fullName"
+              item-value="id"
+              :items="persons"
+              label="Student"
+              v-model="editedPersonID"
+              @input="updatePersonalNote"
+            ></v-select>
+            <v-text-field
+              label="Tardiness"
+              suffix="min" type="number"
+              min="0"
+              :disabled="editedPersonID === ID_NO_PERSON"
+              v-model="editedTardiness"
+            ></v-text-field>
+            <v-checkbox
+              label="Absent"
+              v-model="editedAbsent"
+              :disabled="editedPersonID === ID_NO_PERSON"
+              @change="editedExcused = false; editedExcuseType = null"
+            ></v-checkbox>
+            <v-checkbox
+              label="Excused"
+              v-model="editedExcused"
+              :disabled="editedPersonID === ID_NO_PERSON || !editedAbsent"
+              @change="editedExcuseType = null"
+            ></v-checkbox>
+            <v-select
+              label="Excuse Type"
+              v-model="editedExcuseType"
+              :items="excuseTypes"
+              item-text="name"
+              item-value="shortName"
+              :disabled="editedPersonID === ID_NO_PERSON || !editedAbsent || !editedExcused"
+            ></v-select>
+            <!-- FIXME: get extra mark itself as value -->
+            <v-select
+              label="Extra Marks"
+              v-model="editedExtraMarks"
+              :items="extraMarks"
+              item-text="name"
+              item-value="valueOf"
+              :disabled="editedPersonID === ID_NO_PERSON"
+              multiple
+              chips
+            ></v-select>
+            <v-text-field
+              label="Remarks"
+              v-model="editedRemarks"
+              :disabled="editedPersonID === ID_NO_PERSON"
+            ></v-text-field>
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="error"
+            outlined
+            @click="cancelDialog"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            color="success"
+            @click="saveDialog"
+            :disabled="editedPersonID === ID_NO_PERSON"
+          >
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+</template>
+
+<script>
 import gql from 'graphql-tag';
 
 const ID_NO_PERSON = null;
@@ -236,118 +351,6 @@ export default {
                 }
             ).flat(2);
         }
-    },
-    template: `
-    <v-dialog
-      v-model="dialog"
-      max-width="600px"
-      @click:outside="cancelDialog"
-    >
-      <template v-slot:activator="{ on, attrs }">
-        <div>
-          <template v-for="personalNote in personalNotes">
-            <v-chip class="ma-1" close @click="editPersonalNote(personalNote.person.id)"
-              @click:close="removePersonalNote(personalNote.person.id)" v-if="personalNoteString(personalNote)">
-              {{ personalNote.person.fullName }}: {{ personalNoteString(personalNote) }}
-            </v-chip>
-          </template>
-        </div>
-        <v-tooltip bottom>
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              class="ma-1"
-              color="primary"
-              icon
-              outlined
-              v-bind="attrs"
-              v-on="on"
-              @click="createPersonalNote"
-            >
-              <v-icon>
-                mdi-plus
-              </v-icon>
-            </v-btn>
-          </template>
-          <span v-text="$root.django.gettext('Add personal note')"></span>
-        </v-tooltip>
-      </template>
-      <v-card>
-        <v-card-title>
-          <span class="text-h5">Personal Note</span>
-        </v-card-title>
-        <v-card-text>
-          <v-container>
-            <v-select
-              item-text="fullName"
-              item-value="id"
-              :items="persons"
-              label="Student"
-              v-model="editedPersonID"
-              @input="updatePersonalNote"
-            ></v-select>
-            <v-text-field
-              label="Tardiness"
-              suffix="min" type="number"
-              min="0"
-              :disabled="editedPersonID === ID_NO_PERSON"
-              v-model="editedTardiness"
-            ></v-text-field>
-            <v-checkbox
-              label="Absent"
-              v-model="editedAbsent"
-              :disabled="editedPersonID === ID_NO_PERSON"
-              @change="editedExcused = false; editedExcuseType = null"
-            ></v-checkbox>
-            <v-checkbox
-              label="Excused"
-              v-model="editedExcused"
-              :disabled="editedPersonID === ID_NO_PERSON || !editedAbsent"
-              @change="editedExcuseType = null"
-            ></v-checkbox>
-            <v-select
-              label="Excuse Type"
-              v-model="editedExcuseType"
-              :items="excuseTypes"
-              item-text="name"
-              item-value="shortName"
-              :disabled="editedPersonID === ID_NO_PERSON || !editedAbsent || !editedExcused"
-            ></v-select>
-            <!-- FIXME: get extra mark itself as value -->
-            <v-select
-              label="Extra Marks"
-              v-model="editedExtraMarks"
-              :items="extraMarks"
-              item-text="name"
-              item-value="valueOf"
-              :disabled="editedPersonID === ID_NO_PERSON"
-              multiple
-              chips
-            ></v-select>
-            <v-text-field
-              label="Remarks"
-              v-model="editedRemarks"
-              :disabled="editedPersonID === ID_NO_PERSON"
-            ></v-text-field>
-          </v-container>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn
-            color="error"
-            outlined
-            @click="cancelDialog"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="success"
-            @click="saveDialog"
-            :disabled="editedPersonID === ID_NO_PERSON"
-          >
-            Save
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-    `
+    }
 }
+</script>