Updated Breadcrumbs to composition api & typescript.

frontend/src/components/Breadcrumbs.vue

@@ -3,8 +3,8 @@
     <component
       :is="element"
       :to="base || ''"
-      :aria-label="$t('files.home')"
+      :aria-label="t('files.home')"
-      :title="$t('files.home')"
+      :title="t('files.home')"
     >
       <i class="material-icons">home</i>
     </component>
@@ -18,13 +18,22 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { computed } from "vue";
-  name: "breadcrumbs",
+import { useI18n } from "vue-i18n";
-  props: ["base", "noLink"],
+import { useRoute } from "vue-router";
-  computed: {
+
-    items() {
+const { t } = useI18n();
-      const relativePath = this.$route.path.replace(this.base, "");
+
+const route = useRoute();
+
+const props = defineProps<{
+  base: string;
+  noLink: boolean;
+}>();
+
+const items = computed(() => {
+  const relativePath = route.path.replace(props.base, "");
   let parts = relativePath.split("/");
 
   if (parts[0] === "") {
@@ -35,13 +44,13 @@ export default {
     parts.pop();
   }
 
-      let breadcrumbs = [];
+  let breadcrumbs: any[] = [];
 
   for (let i = 0; i < parts.length; i++) {
     if (i === 0) {
       breadcrumbs.push({
         name: decodeURIComponent(parts[i]),
-            url: this.base + "/" + parts[i] + "/",
+        url: props.base + "/" + parts[i] + "/",
       });
     } else {
       breadcrumbs.push({
@@ -60,16 +69,15 @@ export default {
   }
 
   return breadcrumbs;
-    },
+});
-    element() {
+
-      if (this.noLink !== undefined) {
+const element = computed(() => {
+  if (props.noLink !== undefined) {
     return "span";
   }
 
   return "router-link";
-    },
+});
-  },
-};
 </script>
 
 <style></style>