diff --git a/assets/vue/components/glossary/GlossaryExportForm.vue b/assets/vue/components/glossary/GlossaryExportForm.vue
index 3d363539f4..f8e32e9d04 100644
--- a/assets/vue/components/glossary/GlossaryExportForm.vue
+++ b/assets/vue/components/glossary/GlossaryExportForm.vue
@@ -13,61 +13,52 @@
 </template>
 
 
-<script>
-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";
+<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"
 
-export default {
-  setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const { t } = useI18n();
+const route = useRoute()
+const router = useRouter()
+const {t} = useI18n()
 
-    const selectedFormat = ref('csv');
-    const parentResourceNodeId = ref(Number(route.params.node));
-    const resourceLinkList = ref(
-      JSON.stringify([
-        {
-          sid: route.query.sid,
-          cid: route.query.cid,
-          visibility: RESOURCE_LINK_PUBLISHED, // visible by default
-        },
-      ])
-    );
+const selectedFormat = ref('csv')
+const parentResourceNodeId = ref(Number(route.params.node))
+const resourceLinkList = ref(
+  JSON.stringify([
+    {
+      sid: route.query.sid,
+      cid: route.query.cid,
+      visibility: RESOURCE_LINK_PUBLISHED, // visible by default
+    },
+  ])
+);
 
-    const submitForm = () => {
-      const format = selectedFormat.value;
+const submitForm = () => {
+  const format = selectedFormat.value
 
-      const formData = new FormData();
-      formData.append('format', format);
-      formData.append("sid", route.query.sid);
-      formData.append("cid", route.query.cid);
+  const formData = new FormData()
+  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 => {
-          const fileUrl = window.URL.createObjectURL(new Blob([response.data]));
-          const link = document.createElement('a');
-          link.href = fileUrl;
-          link.setAttribute('download', `glossary.${format}`);
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
-        })
-        .catch(error => {
-          console.error('Error exporting glossary:', error);
-        });
-    };
-
-    return {
-      selectedFormat,
-      submitForm,
-    };
-  },
+  const endpoint = `${ENTRYPOINT}glossaries/export`
+  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}`)
+      document.body.appendChild(link)
+      link.click();
+      document.body.removeChild(link)
+    })
+    .catch(error => {
+      console.error('Error exporting glossary:', error)
+    })
 };
 </script>
 
diff --git a/assets/vue/components/glossary/GlossaryForm.vue b/assets/vue/components/glossary/GlossaryForm.vue
index cda134a693..66d4a5c216 100644
--- a/assets/vue/components/glossary/GlossaryForm.vue
+++ b/assets/vue/components/glossary/GlossaryForm.vue
@@ -3,7 +3,8 @@
     <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>
@@ -39,116 +40,107 @@
           <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>
+<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 {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";
 
-export default {
-  props: {
-    termId: {
-      type: Number,
-      default: null
-    }
-  },
-  setup(props) {
-    const route = useRoute();
-    const router = useRouter();
-    const { t } = useI18n();
-
-    const parentResourceNodeId = ref(Number(route.params.node));
-
-    const resourceLinkList = ref(
-      JSON.stringify([
-        {
-          sid: route.query.sid,
-          cid: route.query.cid,
-          visibility: RESOURCE_LINK_PUBLISHED, // visible by default
-        },
-      ])
-    );
-
-    const formData = ref({
-      name: '',
-      description: '',
-    });
-
-    const fetchTerm = () => {
-      if (props.termId) {
-        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);
-          });
-      }
-    };
-
-    onMounted(() => {
-      fetchTerm();
-    });
-
-    const submitGlossaryForm = () => {
-
-      const postData = {
-        name: formData.value.name,
-        description: formData.value.description,
-        parentResourceNodeId: parentResourceNodeId.value,
-        resourceLinkList: resourceLinkList.value,
-        sid: route.query.sid,
-        cid: route.query.cid,
-      };
-
-      if (props.termId) {
-        const endpoint = `${ENTRYPOINT}glossaries/${props.termId}`;
-        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);
-          });
-
-      } else {
-        const endpoint = `${ENTRYPOINT}glossaries`;
-        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);
-          });
-
-      }
-    };
-
-    return {
-      formData,
-      submitGlossaryForm,
-    };
-  },
-};
+const route = useRoute()
+const router = useRouter()
+const {t} = useI18n()
+
+const props = defineProps({
+  termId: {
+    type: Number,
+    default: null
+  }
+})
+
+const parentResourceNodeId = ref(Number(route.params.node));
+
+const resourceLinkList = ref(
+  JSON.stringify([
+    {
+      sid: route.query.sid,
+      cid: route.query.cid,
+      visibility: RESOURCE_LINK_PUBLISHED, // visible by default
+    },
+  ])
+)
+
+const formData = ref({
+  name: '',
+  description: '',
+})
+
+onMounted(() => {
+  fetchTerm();
+})
+
+const fetchTerm = () => {
+  if (props.termId) {
+    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)
+      })
+  }
+}
+
+const submitGlossaryForm = () => {
+
+  const postData = {
+    name: formData.value.name,
+    description: formData.value.description,
+    parentResourceNodeId: parentResourceNodeId.value,
+    resourceLinkList: resourceLinkList.value,
+    sid: route.query.sid,
+    cid: route.query.cid,
+  }
+
+  if (props.termId) {
+    const endpoint = `${ENTRYPOINT}glossaries/${props.termId}`
+    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);
+      })
+
+  } else {
+    const endpoint = `${ENTRYPOINT}glossaries`
+    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)
+      })
+  }
+}
 </script>
diff --git a/assets/vue/components/glossary/GlossaryImportForm.vue b/assets/vue/components/glossary/GlossaryImportForm.vue
index 2d98680f3e..89d05e5217 100644
--- a/assets/vue/components/glossary/GlossaryImportForm.vue
+++ b/assets/vue/components/glossary/GlossaryImportForm.vue
@@ -5,24 +5,25 @@
         <label for="glossary_file" class="h-4">
           File
         </label>
-        <input class="mt-1" :ref="fileInputRef" name="file" type="file" id="glossary_file" />
+        <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" />
+          <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>
@@ -32,7 +33,8 @@
     <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" />
+          <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>
@@ -49,79 +51,67 @@
   </form>
 </template>
 
-<script>
+<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 {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";
 
-export default {
-  setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const { t } = useI18n();
+const route = useRoute()
+const router = useRouter()
+const {t} = useI18n()
 
-    const fileInputRef = ref(null);
-    const fileType = ref("csv");
-    const replace = ref(false);
-    const update = ref(false);
-    const parentResourceNodeId = ref(Number(route.params.node));
+const fileInputRef = ref(null)
+const fileType = ref("csv")
+const replace = ref(false)
+const update = ref(false)
+const parentResourceNodeId = ref(Number(route.params.node))
 
-    const resourceLinkList = ref(
-      JSON.stringify([
-        {
-          sid: route.query.sid,
-          cid: route.query.cid,
-          visibility: RESOURCE_LINK_PUBLISHED, // visible by default
-        },
-      ])
-    );
+const resourceLinkList = ref(
+  JSON.stringify([
+    {
+      sid: route.query.sid,
+      cid: route.query.cid,
+      visibility: RESOURCE_LINK_PUBLISHED, // visible by default
+    },
+  ])
+)
 
-    const submitForm = async () => {
-      const fileInput = document.getElementById('glossary_file');
-      const file = fileInput.files[0];
-      const formData = new FormData();
-      formData.append("file", file);
-      formData.append("file_type", fileType.value);
-      formData.append("replace", replace.value);
-      formData.append("update", update.value);
-      formData.append("sid", route.query.sid);
-      formData.append("cid", route.query.cid);
-      formData.append("parentResourceNodeId", parentResourceNodeId.value);
-      formData.append("resourceLinkList", resourceLinkList.value);
+const submitForm = async () => {
+  const fileInput = document.getElementById('glossary_file')
+  const file = fileInput.files[0]
+  const formData = new FormData()
+  formData.append("file", file)
+  formData.append("file_type", fileType.value)
+  formData.append("replace", replace.value)
+  formData.append("update", update.value)
+  formData.append("sid", route.query.sid)
+  formData.append("cid", route.query.cid)
+  formData.append("parentResourceNodeId", parentResourceNodeId.value)
+  formData.append("resourceLinkList", resourceLinkList.value)
 
-      console.log('formData', formData);
+  console.log('formData', formData)
 
-      console.log(ENTRYPOINT + 'glossaries/import');
-      try {
-        // eslint-disable-next-line no-unused-vars
-        const response = await axios.post(ENTRYPOINT + 'glossaries/import', formData, {
-          headers: {
-            'Content-Type': 'multipart/form-data'
-          }
-        });
-
-        router.push({
-          name: "GlossaryList",
-          query: route.query,
-        });
-      } catch (error) {
-        fileInputRef.value = null;
-        fileType.value = "csv";
-        replace.value = false;
-        update.value = false;
+  console.log(ENTRYPOINT + 'glossaries/import')
+  try {
+    // eslint-disable-next-line no-unused-vars
+    const response = await axios.post(ENTRYPOINT + 'glossaries/import', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
       }
-    };
+    })
 
-    return {
-      fileInputRef,
-      fileType,
-      replace,
-      update,
-      submitForm,
-    };
-  },
-};
+    router.push({
+      name: "GlossaryList",
+      query: route.query,
+    })
+  } catch (error) {
+    fileInputRef.value = null
+    fileType.value = "csv"
+    replace.value = false
+    update.value = false
+  }
+}
 </script>
diff --git a/assets/vue/components/glossary/GlossaryLayout.vue b/assets/vue/components/glossary/GlossaryLayout.vue
index 5caa8ea2f6..f0550400dc 100644
--- a/assets/vue/components/glossary/GlossaryLayout.vue
+++ b/assets/vue/components/glossary/GlossaryLayout.vue
@@ -2,8 +2,5 @@
   <router-view></router-view>
 </template>
 
-<script>
-export default {
-  name: 'GlossaryLayout'
-}
+<script setup>
 </script>
diff --git a/assets/vue/views/glossary/GlossaryExport.vue b/assets/vue/views/glossary/GlossaryExport.vue
index 93666acc20..f85f3e102b 100644
--- a/assets/vue/views/glossary/GlossaryExport.vue
+++ b/assets/vue/views/glossary/GlossaryExport.vue
@@ -4,34 +4,23 @@
       <button class="btn btn--secondary" @click="goBack">Back</button>
     </div>
     <h2>Export Glossary</h2>
-    <GlossaryExportForm />
+    <GlossaryExportForm/>
   </div>
 </template>
 
-<script>
-import GlossaryExportForm from '../../components/glossary/GlossaryExportForm.vue';
-import {useRoute, useRouter} from "vue-router";
+<script setup>
+import GlossaryExportForm from '../../components/glossary/GlossaryExportForm.vue'
+import {useRoute, useRouter} from "vue-router"
 
-export default {
-  components: {
-    GlossaryExportForm
-  },
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
+const router = useRouter()
+const route = useRoute()
 
-    const goBack = () => {
-      router.push({
-        name: "GlossaryList",
-        query: route.query,
-      });
-    };
-
-    return {
-      goBack,
-    };
-  },
-};
+const goBack = () => {
+  router.push({
+    name: "GlossaryList",
+    query: route.query,
+  })
+}
 </script>
 
 <style scoped>
diff --git a/assets/vue/views/glossary/GlossaryImport.vue b/assets/vue/views/glossary/GlossaryImport.vue
index 3279c30954..57a5e580c8 100644
--- a/assets/vue/views/glossary/GlossaryImport.vue
+++ b/assets/vue/views/glossary/GlossaryImport.vue
@@ -8,28 +8,17 @@
   </div>
 </template>
 
-<script>
-import GlossaryImportForm from "../../components/glossary/GlossaryImportForm.vue";
-import {useRoute, useRouter} from "vue-router";
+<script setup>
+import GlossaryImportForm from "../../components/glossary/GlossaryImportForm.vue"
+import {useRoute, useRouter} from "vue-router"
 
-export default {
-  components: {
-    GlossaryImportForm,
-  },
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
+const router = useRouter()
+const route = useRoute()
 
-    const goBack = () => {
-      router.push({
-        name: "GlossaryList",
-        query: route.query,
-      });
-    };
-
-    return {
-      goBack,
-    };
-  },
-};
+const goBack = () => {
+  router.push({
+    name: "GlossaryList",
+    query: route.query,
+  })
+}
 </script>
diff --git a/assets/vue/views/glossary/GlossaryTermCreate.vue b/assets/vue/views/glossary/GlossaryTermCreate.vue
index 637d7fb6b0..d4fdb10be9 100644
--- a/assets/vue/views/glossary/GlossaryTermCreate.vue
+++ b/assets/vue/views/glossary/GlossaryTermCreate.vue
@@ -8,28 +8,17 @@
   </div>
 </template>
 
-<script>
-import GlossaryForm from "../../components/glossary/GlossaryForm.vue";
-import { useRouter, useRoute } from 'vue-router';
+<script setup>
+import GlossaryForm from "../../components/glossary/GlossaryForm.vue"
+import { useRouter, useRoute } from 'vue-router'
 
-export default {
-  components: {
-    GlossaryForm,
-  },
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
+const router = useRouter()
+const route = useRoute()
 
-    const goBack = () => {
-      router.push({
-        name: "GlossaryList",
-        query: route.query,
-      });
-    };
-
-    return {
-      goBack,
-    };
-  },
-};
+const goBack = () => {
+  router.push({
+    name: "GlossaryList",
+    query: route.query,
+  })
+}
 </script>
diff --git a/assets/vue/views/glossary/GlossaryTermUpdate.vue b/assets/vue/views/glossary/GlossaryTermUpdate.vue
index 3f42497e76..0e5a2fe467 100644
--- a/assets/vue/views/glossary/GlossaryTermUpdate.vue
+++ b/assets/vue/views/glossary/GlossaryTermUpdate.vue
@@ -8,33 +8,20 @@
   </div>
 </template>
 
-<script>
-import GlossaryForm from "../../components/glossary/GlossaryForm.vue";
-import {useRoute, useRouter} from "vue-router";
+<script setup>
+import GlossaryForm from "../../components/glossary/GlossaryForm.vue"
+import {useRoute, useRouter} from "vue-router"
+import {computed} from "vue"
 
-export default {
-  components: {
-    GlossaryForm,
-  },
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
+const router = useRouter()
+const route = useRoute()
 
-    const goBack = () => {
-      router.push({
-        name: "GlossaryList",
-        query: route.query,
-      });
-    };
+const termId = computed(() => route.params.id)
 
-    return {
-      goBack,
-    };
-  },
-  computed: {
-    termId() {
-      return this.$route.params.id;
-    },
-  },
-};
+const goBack = () => {
+  router.push({
+    name: "GlossaryList",
+    query: route.query,
+  })
+}
 </script>