diff --git a/.github/workflows/format_vue_code.yml b/.github/workflows/format_vue_code.yml
new file mode 100644
index 0000000000..c751e79bd0
--- /dev/null
+++ b/.github/workflows/format_vue_code.yml
@@ -0,0 +1,21 @@
+name: Vue format code 🔎
+
+on: [push, pull_request]
+
+jobs:
+  prettier:
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          # Make sure the actual branch is checked out when running on pull requests
+          ref: ${{ github.head_ref }}
+
+      - name: Prettify code
+        uses: creyD/prettier_action@v4.3
+        with:
+          # This part is also where you can pass other options, for example:
+          prettier_options: assets/vue/**/*.{vue,js} -c
+          only_changed: True
diff --git a/.prettierrc.json b/.prettierrc.json
index 963354f231..a13b242fd4 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,3 +1,4 @@
 {
-  "printWidth": 120
+  "printWidth": 120,
+  "semi": false
 }
diff --git a/assets/vue/components/glossary/GlossaryExportForm.vue b/assets/vue/components/glossary/GlossaryExportForm.vue
index f8e32e9d04..e94793352e 100644
--- a/assets/vue/components/glossary/GlossaryExportForm.vue
+++ b/assets/vue/components/glossary/GlossaryExportForm.vue
@@ -12,20 +12,19 @@
   </form>
 </template>
 
-
 <script setup>
 import axios from "axios"
-import {ENTRYPOINT} from "../../config/entrypoint"
-import {RESOURCE_LINK_PUBLISHED} from "../resource_links/visibility"
-import {useRoute, useRouter} from 'vue-router'
-import {useI18n} from "vue-i18n"
-import {ref, onMounted} from "vue"
+import { ENTRYPOINT } from "../../config/entrypoint"
+import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility"
+import { useRoute, useRouter } from "vue-router"
+import { useI18n } from "vue-i18n"
+import { ref } from "vue"
 
 const route = useRoute()
 const router = useRouter()
-const {t} = useI18n()
+const { t } = useI18n()
 
-const selectedFormat = ref('csv')
+const selectedFormat = ref("csv")
 const parentResourceNodeId = ref(Number(route.params.node))
 const resourceLinkList = ref(
   JSON.stringify([
@@ -35,31 +34,32 @@ const resourceLinkList = ref(
       visibility: RESOURCE_LINK_PUBLISHED, // visible by default
     },
   ])
-);
+)
 
 const submitForm = () => {
   const format = selectedFormat.value
 
   const formData = new FormData()
-  formData.append('format', format)
+  formData.append("format", format)
   formData.append("sid", route.query.sid)
   formData.append("cid", route.query.cid)
 
   const endpoint = `${ENTRYPOINT}glossaries/export`
-  axios.post(endpoint, formData, {responseType: 'blob'})
-    .then(response => {
+  axios
+    .post(endpoint, formData, { responseType: "blob" })
+    .then((response) => {
       const fileUrl = window.URL.createObjectURL(new Blob([response.data]))
-      const link = document.createElement('a')
-      link.href = fileUrl;
-      link.setAttribute('download', `glossary.${format}`)
+      const link = document.createElement("a")
+      link.href = fileUrl
+      link.setAttribute("download", `glossary.${format}`)
       document.body.appendChild(link)
-      link.click();
+      link.click()
       document.body.removeChild(link)
     })
-    .catch(error => {
-      console.error('Error exporting glossary:', error)
+    .catch((error) => {
+      console.error("Error exporting glossary:", error)
     })
-};
+}
 </script>
 
 <style scoped>
diff --git a/assets/vue/components/glossary/GlossaryForm.vue b/assets/vue/components/glossary/GlossaryForm.vue
index 66d4a5c216..ea416ceb74 100644
--- a/assets/vue/components/glossary/GlossaryForm.vue
+++ b/assets/vue/components/glossary/GlossaryForm.vue
@@ -3,8 +3,13 @@
     <form @submit.prevent="submitGlossaryForm" name="glossary" id="glossary">
       <div class="field">
         <div class="p-float-label">
-          <input v-model="formData.name" id="glossary_title" name="name" type="text"
-                 class="p-inputtext p-component p-filled"/>
+          <input
+            v-model="formData.name"
+            id="glossary_title"
+            name="name"
+            type="text"
+            class="p-inputtext p-component p-filled"
+          />
 
           <label for="glossary_title">
             <span class="form_required">*</span>
@@ -24,10 +29,7 @@
       </div>
       <div class="field 2">
         <div class="8">
-
-          <label for="glossary_SubmitGlossary" class="h-4 ">
-
-          </label>
+          <label for="glossary_SubmitGlossary" class="h-4"> </label>
 
           <button class="btn btn--primary" name="SubmitGlossary" type="submit" id="glossary_SubmitGlossary">
             <em class="mdi mdi-plus"></em> Save term
@@ -40,33 +42,32 @@
           <small>Required field</small>
         </div>
       </div>
-      <input name="_qf__glossary" type="hidden" value="" id="glossary__qf__glossary"/>
-      <input name="sec_token" type="hidden" value="1e7d47c276bfdfe308a79e1b71d58089" id="glossary_sec_token"/>
-
+      <input name="_qf__glossary" type="hidden" value="" id="glossary__qf__glossary" />
+      <input name="sec_token" type="hidden" value="1e7d47c276bfdfe308a79e1b71d58089" id="glossary_sec_token" />
     </form>
   </div>
 </template>
 
 <script setup>
-import axios from "axios";
-import {ENTRYPOINT} from "../../config/entrypoint";
-import {useRoute, useRouter} from 'vue-router';
-import {useI18n} from "vue-i18n";
-import {ref, onMounted} from "vue";
-import {RESOURCE_LINK_PUBLISHED} from "../resource_links/visibility";
+import axios from "axios"
+import { ENTRYPOINT } from "../../config/entrypoint"
+import { useRoute, useRouter } from "vue-router"
+import { useI18n } from "vue-i18n"
+import { ref, onMounted } from "vue"
+import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility"
 
 const route = useRoute()
 const router = useRouter()
-const {t} = useI18n()
+const { t } = useI18n()
 
 const props = defineProps({
   termId: {
     type: Number,
-    default: null
-  }
+    default: null,
+  },
 })
 
-const parentResourceNodeId = ref(Number(route.params.node));
+const parentResourceNodeId = ref(Number(route.params.node))
 
 const resourceLinkList = ref(
   JSON.stringify([
@@ -79,30 +80,30 @@ const resourceLinkList = ref(
 )
 
 const formData = ref({
-  name: '',
-  description: '',
+  name: "",
+  description: "",
 })
 
 onMounted(() => {
-  fetchTerm();
+  fetchTerm()
 })
 
 const fetchTerm = () => {
   if (props.termId) {
-    axios.get(ENTRYPOINT + 'glossaries/' + props.termId)
-      .then(response => {
+    axios
+      .get(ENTRYPOINT + "glossaries/" + props.termId)
+      .then((response) => {
         const glossary = response.data
         formData.value.name = glossary.name
         formData.value.description = glossary.description
       })
-      .catch(error => {
-        console.error('Error fetching link:', error)
+      .catch((error) => {
+        console.error("Error fetching link:", error)
       })
   }
 }
 
 const submitGlossaryForm = () => {
-
   const postData = {
     name: formData.value.name,
     description: formData.value.description,
@@ -114,32 +115,33 @@ const submitGlossaryForm = () => {
 
   if (props.termId) {
     const endpoint = `${ENTRYPOINT}glossaries/${props.termId}`
-    axios.put(endpoint, postData)
-      .then(response => {
-        console.log('Glossary updated:', response.data)
+    axios
+      .put(endpoint, postData)
+      .then((response) => {
+        console.log("Glossary updated:", response.data)
 
         router.push({
           name: "GlossaryList",
           query: route.query,
         })
       })
-      .catch(error => {
-        console.error('Error updating Glossary:', error);
+      .catch((error) => {
+        console.error("Error updating Glossary:", error)
       })
-
   } else {
     const endpoint = `${ENTRYPOINT}glossaries`
-    axios.post(endpoint, postData)
-      .then(response => {
-        console.log('Glossary created:', response.data)
+    axios
+      .post(endpoint, postData)
+      .then((response) => {
+        console.log("Glossary created:", response.data)
 
         router.push({
           name: "GlossaryList",
           query: route.query,
-        });
+        })
       })
-      .catch(error => {
-        console.error('Error creating Glossary:', error)
+      .catch((error) => {
+        console.error("Error creating Glossary:", error)
       })
   }
 }
diff --git a/assets/vue/components/glossary/GlossaryImportForm.vue b/assets/vue/components/glossary/GlossaryImportForm.vue
index 89d05e5217..5ddeba953c 100644
--- a/assets/vue/components/glossary/GlossaryImportForm.vue
+++ b/assets/vue/components/glossary/GlossaryImportForm.vue
@@ -2,42 +2,48 @@
   <form @submit.prevent="submitForm">
     <div class="field 2">
       <div class="8">
-        <label for="glossary_file" class="h-4">
-          File
-        </label>
-        <input class="mt-1" :ref="fileInputRef" name="file" type="file" id="glossary_file"/>
+        <label for="glossary_file" class="h-4"> File </label>
+        <input class="mt-1" :ref="fileInputRef" name="file" type="file" id="glossary_file" />
       </div>
     </div>
     <div class="field">
       <label>File type</label>
       <div class="field-radiobutton">
-        <input name="file_type" value="csv" type="radio" id="qf_85f94d" v-model="fileType" checked="checked"/>
+        <input name="file_type" value="csv" type="radio" id="qf_85f94d" v-model="fileType" checked="checked" />
         <label for="qf_85f94d" class="">CSV</label>
       </div>
       <div class="field-radiobutton">
-        <input name="file_type" value="xls" type="radio" id="qf_bff468" v-model="fileType"/>
+        <input name="file_type" value="xls" type="radio" id="qf_bff468" v-model="fileType" />
         <label for="qf_bff468" class="">XLS</label>
       </div>
     </div>
     <div class="field 2">
       <div class="8">
         <div id="replace" class="field-checkbox">
-          <input class="appearance-none checked:bg-support-4 outline-none" name="replace" type="checkbox" value="1"
-                 id="qf_5b8df0" v-model="replace"/>
-          <label for="qf_5b8df0" class="">
-            Delete all terms before import.
-          </label>
+          <input
+            class="appearance-none outline-none checked:bg-support-4"
+            name="replace"
+            type="checkbox"
+            value="1"
+            id="qf_5b8df0"
+            v-model="replace"
+          />
+          <label for="qf_5b8df0" class=""> Delete all terms before import. </label>
         </div>
       </div>
     </div>
     <div class="field 2">
       <div class="8">
         <div id="update" class="field-checkbox">
-          <input class="appearance-none checked:bg-support-4 outline-none" name="update" type="checkbox" value="1"
-                 id="qf_594e6e" v-model="update"/>
-          <label for="qf_594e6e" class="">
-            Update existing terms.
-          </label>
+          <input
+            class="appearance-none outline-none checked:bg-support-4"
+            name="update"
+            type="checkbox"
+            value="1"
+            id="qf_594e6e"
+            v-model="update"
+          />
+          <label for="qf_594e6e" class=""> Update existing terms. </label>
         </div>
       </div>
     </div>
@@ -52,16 +58,16 @@
 </template>
 
 <script setup>
-import axios from 'axios';
-import {ENTRYPOINT} from "../../config/entrypoint";
-import {useRoute, useRouter} from "vue-router";
-import {useI18n} from "vue-i18n";
-import {ref} from "vue";
-import {RESOURCE_LINK_PUBLISHED} from "../resource_links/visibility";
+import axios from "axios"
+import { ENTRYPOINT } from "../../config/entrypoint"
+import { useRoute, useRouter } from "vue-router"
+import { useI18n } from "vue-i18n"
+import { ref } from "vue"
+import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility"
 
 const route = useRoute()
 const router = useRouter()
-const {t} = useI18n()
+const { t } = useI18n()
 
 const fileInputRef = ref(null)
 const fileType = ref("csv")
@@ -80,7 +86,7 @@ const resourceLinkList = ref(
 )
 
 const submitForm = async () => {
-  const fileInput = document.getElementById('glossary_file')
+  const fileInput = document.getElementById("glossary_file")
   const file = fileInput.files[0]
   const formData = new FormData()
   formData.append("file", file)
@@ -92,15 +98,15 @@ const submitForm = async () => {
   formData.append("parentResourceNodeId", parentResourceNodeId.value)
   formData.append("resourceLinkList", resourceLinkList.value)
 
-  console.log('formData', formData)
+  console.log("formData", formData)
 
-  console.log(ENTRYPOINT + 'glossaries/import')
+  console.log(ENTRYPOINT + "glossaries/import")
   try {
     // eslint-disable-next-line no-unused-vars
-    const response = await axios.post(ENTRYPOINT + 'glossaries/import', formData, {
+    const response = await axios.post(ENTRYPOINT + "glossaries/import", formData, {
       headers: {
-        'Content-Type': 'multipart/form-data'
-      }
+        "Content-Type": "multipart/form-data",
+      },
     })
 
     router.push({
diff --git a/assets/vue/components/glossary/GlossaryLayout.vue b/assets/vue/components/glossary/GlossaryLayout.vue
index f0550400dc..3582faf75e 100644
--- a/assets/vue/components/glossary/GlossaryLayout.vue
+++ b/assets/vue/components/glossary/GlossaryLayout.vue
@@ -2,5 +2,4 @@
   <router-view></router-view>
 </template>
 
-<script setup>
-</script>
+<script setup></script>
diff --git a/assets/vue/views/glossary/GlossaryExport.vue b/assets/vue/views/glossary/GlossaryExport.vue
index f85f3e102b..6a16a5a306 100644
--- a/assets/vue/views/glossary/GlossaryExport.vue
+++ b/assets/vue/views/glossary/GlossaryExport.vue
@@ -4,13 +4,13 @@
       <button class="btn btn--secondary" @click="goBack">Back</button>
     </div>
     <h2>Export Glossary</h2>
-    <GlossaryExportForm/>
+    <GlossaryExportForm />
   </div>
 </template>
 
 <script setup>
-import GlossaryExportForm from '../../components/glossary/GlossaryExportForm.vue'
-import {useRoute, useRouter} from "vue-router"
+import GlossaryExportForm from "../../components/glossary/GlossaryExportForm.vue"
+import { useRoute, useRouter } from "vue-router"
 
 const router = useRouter()
 const route = useRoute()
diff --git a/assets/vue/views/glossary/GlossaryImport.vue b/assets/vue/views/glossary/GlossaryImport.vue
index 57a5e580c8..a05959d375 100644
--- a/assets/vue/views/glossary/GlossaryImport.vue
+++ b/assets/vue/views/glossary/GlossaryImport.vue
@@ -3,14 +3,17 @@
     <div class="mb-4">
       <button class="btn btn--secondary" @click="goBack">Back</button>
     </div>
-    <h1 class="text-h3 font-small text-gray-800 mb-4">Import glossary<hr /></h1>
+    <h1 class="text-h3 font-small text-gray-800 mb-4">
+      Import glossary
+      <hr />
+    </h1>
     <GlossaryImportForm />
   </div>
 </template>
 
 <script setup>
 import GlossaryImportForm from "../../components/glossary/GlossaryImportForm.vue"
-import {useRoute, useRouter} from "vue-router"
+import { useRoute, useRouter } from "vue-router"
 
 const router = useRouter()
 const route = useRoute()
diff --git a/assets/vue/views/glossary/GlossaryList.vue b/assets/vue/views/glossary/GlossaryList.vue
index 66df121312..16be68b5a3 100644
--- a/assets/vue/views/glossary/GlossaryList.vue
+++ b/assets/vue/views/glossary/GlossaryList.vue
@@ -1,43 +1,27 @@
 <template>
   <div>
-    <input
-      type="text"
-      v-model="searchTerm"
-      placeholder="Search term..."
-    />
+    <input type="text" v-model="searchTerm" placeholder="Search term..." />
     <ButtonToolbar v-if="isAuthenticated && isCurrentTeacher">
       <BaseButton
         label="Add new glossary term"
         icon="new_glossary_term"
-        class="mr-2 mb-2"
+        class="mb-2 mr-2"
         type="black"
         @click="addNewTerm"
       />
-      <BaseButton
-        label="Import glossary"
-        icon="import"
-        class="mr-2 mb-2"
-        type="black"
-        @click="importGlossary"
-      />
-      <BaseButton
-        label="Export"
-        icon="save"
-        class="mr-2 mb-2"
-        type="black"
-        @click="exportGlossary"
-      />
+      <BaseButton label="Import glossary" icon="import" class="mb-2 mr-2" type="black" @click="importGlossary" />
+      <BaseButton label="Export" icon="save" class="mb-2 mr-2" type="black" @click="exportGlossary" />
       <BaseButton
         :label="view === 'table' ? 'List view' : 'Table view'"
         icon="view_text"
-        class="mr-2 mb-2"
+        class="mb-2 mr-2"
         type="black"
         @click="changeView(view)"
       />
       <BaseButton
         label="Export to Documents"
         icon="export_to_documents"
-        class="mr-2 mb-2"
+        class="mb-2 mr-2"
         type="black"
         @click="exportToDocuments"
       />
@@ -45,17 +29,8 @@
 
     <div v-if="glossaries.length === 0">
       <!-- Render the image and create button -->
-      <EmptyState
-        icon="mdi mdi-alphabetical"
-        summary="Add your first term glossary to this course"
-      >
-        <BaseButton
-          label="Add Glossary"
-          class="mt-4"
-          icon="plus"
-          type="primary"
-          @click="addNewTerm"
-        />
+      <EmptyState icon="mdi mdi-alphabetical" summary="Add your first term glossary to this course">
+        <BaseButton label="Add Glossary" class="mt-4" icon="plus" type="primary" @click="addNewTerm" />
       </EmptyState>
     </div>
 
@@ -64,52 +39,28 @@
         <ul>
           <li v-for="glossary in glossaries" :key="glossary.id">
             <span>{{ glossary.name }} - {{ glossary.description }}</span>
-            <BaseButton
-              label="Edit"
-              class="mr-2"
-              icon="edit"
-              type="black"
-              @click="editTerm(glossary.iid)"
-            />
-            <BaseButton
-              label="Delete"
-              class="mr-2"
-              icon="delete"
-              type="black"
-              @click="deleteTerm(glossary.iid)"
-            />
+            <BaseButton label="Edit" class="mr-2" icon="edit" type="black" @click="editTerm(glossary.iid)" />
+            <BaseButton label="Delete" class="mr-2" icon="delete" type="black" @click="deleteTerm(glossary.iid)" />
           </li>
         </ul>
       </div>
       <table v-else>
         <thead>
-        <tr>
-          <th>Title</th>
-          <th>Description</th>
-          <th>Actions</th>
-        </tr>
+          <tr>
+            <th>Title</th>
+            <th>Description</th>
+            <th>Actions</th>
+          </tr>
         </thead>
         <tbody>
-        <tr v-for="glossary in glossaries" :key="glossary.id">
-          <td>{{ glossary.name }}</td>
-          <td>{{ glossary.description }}</td>
-          <td>
-            <BaseButton
-              label="Edit"
-              class="mr-2"
-              icon="edit"
-              type="black"
-              @click="editTerm(glossary.iid)"
-            />
-            <BaseButton
-              label="Delete"
-              class="mr-2"
-              icon="delete"
-              type="black"
-              @click="deleteTerm(glossary.iid)"
-            />
-          </td>
-        </tr>
+          <tr v-for="glossary in glossaries" :key="glossary.id">
+            <td>{{ glossary.name }}</td>
+            <td>{{ glossary.description }}</td>
+            <td>
+              <BaseButton label="Edit" class="mr-2" icon="edit" type="black" @click="editTerm(glossary.iid)" />
+              <BaseButton label="Delete" class="mr-2" icon="delete" type="black" @click="deleteTerm(glossary.iid)" />
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -117,25 +68,25 @@
 </template>
 
 <script setup>
-import EmptyState from "../../components/EmptyState.vue";
-import BaseButton from "../../components/basecomponents/BaseButton.vue";
-import ButtonToolbar from "../../components/basecomponents/ButtonToolbar.vue";
-import {computed, onMounted, ref, watch} from "vue";
-import { useStore } from "vuex";
-import { useRoute, useRouter } from "vue-router";
-import { useI18n } from "vue-i18n";
-import axios from "axios";
-import { ENTRYPOINT } from "../../config/entrypoint";
-import {RESOURCE_LINK_PUBLISHED} from "../../components/resource_links/visibility";
-
-const store = useStore();
-const route = useRoute();
-const router = useRouter();
-
-const { t } = useI18n();
-
-const searchTerm = ref('');
-const parentResourceNodeId = ref(Number(route.params.node));
+import EmptyState from "../../components/EmptyState.vue"
+import BaseButton from "../../components/basecomponents/BaseButton.vue"
+import ButtonToolbar from "../../components/basecomponents/ButtonToolbar.vue"
+import { computed, onMounted, ref, watch } from "vue"
+import { useStore } from "vuex"
+import { useRoute, useRouter } from "vue-router"
+import { useI18n } from "vue-i18n"
+import axios from "axios"
+import { ENTRYPOINT } from "../../config/entrypoint"
+import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibility"
+
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
+
+const { t } = useI18n()
+
+const searchTerm = ref("")
+const parentResourceNodeId = ref(Number(route.params.node))
 
 const resourceLinkList = ref(
   JSON.stringify([
@@ -145,43 +96,42 @@ const resourceLinkList = ref(
       visibility: RESOURCE_LINK_PUBLISHED, // visible by default
     },
   ])
-);
+)
 
-const isAuthenticated = computed(() => store.getters["security/isAuthenticated"]);
-const isCurrentTeacher = computed(() => store.getters["security/isCurrentTeacher"]);
+const isAuthenticated = computed(() => store.getters["security/isAuthenticated"])
+const isCurrentTeacher = computed(() => store.getters["security/isCurrentTeacher"])
 
-const glossaries = ref([]);
-const view = ref('list');
+const glossaries = ref([])
+const view = ref("list")
 
 function addNewTerm() {
   router.push({
     name: "CreateTerm",
     query: route.query,
-  });
+  })
 }
 
 function editTerm(termId) {
-
-  console.log('termId ', termId);
+  console.log("termId ", termId)
 
   router.push({
-    name: 'UpdateTerm',
-    params: { id: termId},
+    name: "UpdateTerm",
+    params: { id: termId },
     query: route.query,
-  });
+  })
 }
 
 function deleteTerm(termId) {
-  if (confirm('¿Delete?')) {
+  if (confirm("¿Delete?")) {
     axios
       .delete(`${ENTRYPOINT}glossaries/${termId}`)
-      .then(response => {
-        console.log('Term deleted:', response.data);
-        fetchGlossaries();
+      .then((response) => {
+        console.log("Term deleted:", response.data)
+        fetchGlossaries()
+      })
+      .catch((error) => {
+        console.error("Error deleting term:", error)
       })
-      .catch(error => {
-        console.error('Error deleting term:', error);
-      });
   }
 }
 
@@ -189,70 +139,65 @@ function importGlossary() {
   router.push({
     name: "ImportGlossary",
     query: route.query,
-  });
+  })
 }
 
 function exportGlossary() {
   router.push({
     name: "ExportGlossary",
     query: route.query,
-  });
+  })
 }
 
 function changeView(newView) {
   // Handle changing the view (e.g., table view)
-  view.value = newView === 'table' ? 'list' : 'table';
+  view.value = newView === "table" ? "list" : "table"
 }
 
-
 function exportToDocuments() {
-
   const postData = {
     parentResourceNodeId: parentResourceNodeId.value,
     resourceLinkList: resourceLinkList.value,
-  };
+  }
 
-  const endpoint = `${ENTRYPOINT}glossaries/export_to_documents`;
+  const endpoint = `${ENTRYPOINT}glossaries/export_to_documents`
 
-  axios.post(endpoint, postData)
-    .then(response => {
-      console.log(response.data);
+  axios
+    .post(endpoint, postData)
+    .then((response) => {
+      console.log(response.data)
+    })
+    .catch((error) => {
+      console.error(error)
     })
-    .catch(error => {
-      console.error(error);
-    });
 }
 
-
 function fetchGlossaries() {
   const params = {
-    'resourceNode.parent': route.query.parent || null,
-    'cid': route.query.cid || null,
-    'sid': route.query.sid || null,
-    'q': searchTerm.value
-  };
+    "resourceNode.parent": route.query.parent || null,
+    cid: route.query.cid || null,
+    sid: route.query.sid || null,
+    q: searchTerm.value,
+  }
 
   axios
-    .get(ENTRYPOINT + 'glossaries', { params })
-    .then(response => {
-
-      console.log('responsedata:', response.data);
-      glossaries.value = response.data;
-
-      console.log('en fetch glossaries.value', glossaries.value);
+    .get(ENTRYPOINT + "glossaries", { params })
+    .then((response) => {
+      console.log("responsedata:", response.data)
+      glossaries.value = response.data
 
+      console.log("en fetch glossaries.value", glossaries.value)
+    })
+    .catch((error) => {
+      console.error("Error fetching links:", error)
     })
-    .catch(error => {
-      console.error('Error fetching links:', error);
-    });
 }
 
 watch(searchTerm, () => {
-  fetchGlossaries();
-});
+  fetchGlossaries()
+})
 
 onMounted(() => {
-  fetchGlossaries();
-});
-
+  fetchGlossaries()
+})
 </script>
diff --git a/assets/vue/views/glossary/GlossaryTermCreate.vue b/assets/vue/views/glossary/GlossaryTermCreate.vue
index d4fdb10be9..a2670cb2d6 100644
--- a/assets/vue/views/glossary/GlossaryTermCreate.vue
+++ b/assets/vue/views/glossary/GlossaryTermCreate.vue
@@ -3,14 +3,17 @@
     <div class="mb-4">
       <button class="btn btn--secondary" @click="goBack">Back</button>
     </div>
-    <h1 class="text-h3 font-small text-gray-800 mb-4">Add new glossary term<hr /></h1>
+    <h1 class="text-h3 font-small text-gray-800 mb-4">
+      Add new glossary term
+      <hr />
+    </h1>
     <GlossaryForm />
   </div>
 </template>
 
 <script setup>
 import GlossaryForm from "../../components/glossary/GlossaryForm.vue"
-import { useRouter, useRoute } from 'vue-router'
+import { useRouter, useRoute } from "vue-router"
 
 const router = useRouter()
 const route = useRoute()
diff --git a/assets/vue/views/glossary/GlossaryTermUpdate.vue b/assets/vue/views/glossary/GlossaryTermUpdate.vue
index 0e5a2fe467..1688b62e43 100644
--- a/assets/vue/views/glossary/GlossaryTermUpdate.vue
+++ b/assets/vue/views/glossary/GlossaryTermUpdate.vue
@@ -3,15 +3,18 @@
     <div class="mb-4">
       <button class="btn btn--secondary" @click="goBack">Back</button>
     </div>
-    <h1>Edit term  <hr /></h1>
+    <h1>
+      Edit term
+      <hr />
+    </h1>
     <GlossaryForm :termId="termId" />
   </div>
 </template>
 
 <script setup>
 import GlossaryForm from "../../components/glossary/GlossaryForm.vue"
-import {useRoute, useRouter} from "vue-router"
-import {computed} from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { computed } from "vue"
 
 const router = useRouter()
 const route = useRoute()
diff --git a/package.json b/package.json
index a535f6a2e3..c5d45f90c6 100644
--- a/package.json
+++ b/package.json
@@ -125,6 +125,7 @@
     "postcss-loader": "^7.0.2",
     "postcss-prefix-selector": "^1.16.0",
     "prettier": "2.8.8",
+    "prettier-plugin-tailwindcss": "^0.3.0",
     "purgecss-webpack-plugin": "^4.1.3",
     "sass": "^1.59.3",
     "sass-loader": "^13.2.0",
diff --git a/yarn.lock b/yarn.lock
index 5159cce61b..ac4a5755c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3661,6 +3661,7 @@ __metadata:
     postcss-loader: ^7.0.2
     postcss-prefix-selector: ^1.16.0
     prettier: 2.8.8
+    prettier-plugin-tailwindcss: ^0.3.0
     pretty-bytes: ^5.6.0
     primeflex: ^3.3.0
     primeicons: ^6.0.1
@@ -7919,6 +7920,61 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier-plugin-tailwindcss@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "prettier-plugin-tailwindcss@npm:0.3.0"
+  peerDependencies:
+    "@ianvs/prettier-plugin-sort-imports": "*"
+    "@prettier/plugin-pug": "*"
+    "@shopify/prettier-plugin-liquid": "*"
+    "@shufo/prettier-plugin-blade": "*"
+    "@trivago/prettier-plugin-sort-imports": "*"
+    prettier: ">=2.2.0"
+    prettier-plugin-astro: "*"
+    prettier-plugin-css-order: "*"
+    prettier-plugin-import-sort: "*"
+    prettier-plugin-jsdoc: "*"
+    prettier-plugin-marko: "*"
+    prettier-plugin-organize-attributes: "*"
+    prettier-plugin-organize-imports: "*"
+    prettier-plugin-style-order: "*"
+    prettier-plugin-svelte: "*"
+    prettier-plugin-twig-melody: "*"
+  peerDependenciesMeta:
+    "@ianvs/prettier-plugin-sort-imports":
+      optional: true
+    "@prettier/plugin-pug":
+      optional: true
+    "@shopify/prettier-plugin-liquid":
+      optional: true
+    "@shufo/prettier-plugin-blade":
+      optional: true
+    "@trivago/prettier-plugin-sort-imports":
+      optional: true
+    prettier-plugin-astro:
+      optional: true
+    prettier-plugin-css-order:
+      optional: true
+    prettier-plugin-import-sort:
+      optional: true
+    prettier-plugin-jsdoc:
+      optional: true
+    prettier-plugin-marko:
+      optional: true
+    prettier-plugin-organize-attributes:
+      optional: true
+    prettier-plugin-organize-imports:
+      optional: true
+    prettier-plugin-style-order:
+      optional: true
+    prettier-plugin-svelte:
+      optional: true
+    prettier-plugin-twig-melody:
+      optional: true
+  checksum: 007c09558433dac0c81d42fd9695f8ed17be56be2e446a03e2557f01ae8e26bb11945780f9afa4e6e90b861aad3fbfac6a65d381804273d5539e7d26b0a270c9
+  languageName: node
+  linkType: hard
+
 "prettier@npm:2.8.8":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"