From 923a1857d2b2e1df6cb6795a62b52a48b7e2a797 Mon Sep 17 00:00:00 2001
From: Amtul Noor <amtul.noor@stud.uni-goettingen.de>
Date: Thu, 30 Nov 2023 09:30:44 +0000
Subject: [PATCH] refactor: convert all components to composition API

---
 src/App.vue                                   | 254 ++++++------
 src/components/ContentView.vue                | 153 ++++----
 src/components/ImageView.vue                  | 149 ++++---
 src/components/Loading.vue                    |  30 +-
 src/components/Notification.vue               |  83 ++--
 src/components/TreeView.vue                   | 371 +++++++++---------
 src/components/annotations/AnnotationIcon.vue |  38 +-
 .../annotations/AnnotationsList.vue           |  72 ++--
 .../annotations/AnnotationsView.vue           | 151 ++++---
 src/components/header/GlobalHeader.vue        |  53 +--
 src/components/header/Language.vue            |  63 ++-
 src/components/header/Navbar.vue              | 175 ++++-----
 src/components/header/PanelsToggle.vue        | 144 +++----
 src/components/header/SoftwareInfo.vue        |  38 +-
 src/components/header/TitleBar.vue            |  34 +-
 src/components/header/Tools.vue               |  36 +-
 src/components/metadata/Actor.vue             |  33 +-
 .../metadata/CollectionMetadata.vue           |  65 ++-
 src/components/metadata/ItemMetadata.vue      |  59 +--
 src/components/metadata/ManifestMetadata.vue  |  66 ++--
 src/components/metadata/MetadataItem.vue      |  40 +-
 src/components/metadata/MetadataLink.vue      |  26 +-
 src/components/metadata/MetadataValue.vue     |  67 +---
 src/components/metadata/MetadataView.vue      |  28 +-
 src/components/panels/Panel.vue               | 219 ++++++-----
 src/components/panels/PanelsWrapper.vue       |  47 +--
 .../panels/actions/PanelImageAction.vue       |  27 +-
 .../panels/actions/PanelToggleAction.vue      |  45 ++-
 .../panels/actions/PanelZoomAction.vue        |  86 ++--
 src/i18n/index.js                             |   1 +
 src/main.js                                   |  12 +-
 31 files changed, 1213 insertions(+), 1452 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 54e91402..ca031cb9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,6 +30,12 @@
 </template>
 
 <script>
+export default {
+  name: 'TIDO',
+}
+</script>
+
+<script setup>
 import { setCssVar } from 'quasar';
 import { biBook } from '@quasar/extras/bootstrap-icons';
 import GlobalHeader from '@/components/header/GlobalHeader.vue';
@@ -38,146 +44,124 @@ import PanelsWrapper from '@/components/panels/PanelsWrapper.vue';
 import Notification from '@/components/Notification.vue';
 import Loading from '@/components/Loading.vue';
 
-export default {
-  name: 'TIDO',
-  components: {
-    Loading,
-    PanelsWrapper,
-    GlobalHeader,
-    Notification,
-  },
-  data() {
-    return {
-      errorTitle: '',
-      errorMessage: '',
-      isLoading: true,
-    };
-  },
-  computed: {
-    ready() {
-      const { collection: collectionUrl, manifest: manifestUrl } = this.config;
-
-      if (!this.item) {
-        return false;
-      }
-
-      if (this.item.annotationCollection && this.annotations === null) {
-        return false;
-      }
-
-      if (collectionUrl) {
-        return this.manifests !== null && !!(this.collection) && !!(this.manifest);
-      }
-
-      if (manifestUrl) {
-        return !!(this.manifest);
-      }
-
-      return true;
-    },
-    annotations() {
-      return this.$store.getters['annotations/annotations'];
-    },
-    config() {
-      return this.$store.getters['config/config'];
-    },
-    collection() {
-      return this.$store.getters['contents/collection'];
-    },
-    item() {
-      return this.$store.getters['contents/item'];
-    },
-    manifest() {
-      return this.$store.getters['contents/manifest'];
-    },
-    manifests() {
-      return this.$store.getters['contents/manifests'];
-    },
-  },
-  created() {
-    this.emptyIcon = biBook;
-  },
-  async mounted() {
-    this.isLoading = true;
-    this.$q.dark.set('auto');
-
-    await this.loadConfig();
-
-    this.$i18n.locale = this.config.lang;
-
-    const colorsForceMode = this.config.colors.forceMode;
-
-    if (colorsForceMode && colorsForceMode !== 'none') {
-      this.$q.dark.set(colorsForceMode === 'dark');
-    }
+import { computed, inject, onMounted, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
 
-    if (this.config?.colors?.primary) {
-      setCssVar('primary', this.config.colors.primary);
-    }
+const store = useStore();
+const $q = useQuasar();
+const { t, locale: i18nLocale } = useI18n();
 
-    if (this.config?.colors?.secondary) {
-      setCssVar('secondary', this.config.colors.secondary);
-    }
+const errorTitle = ref('');
+const errorMessage = ref('');
+const isLoading = ref(true);
+
+const emptyIcon = biBook;
+
+const ready = computed(() => {
+  const { collection: collectionUrl, manifest: manifestUrl } = config.value;
+
+  if (!item.value) {
+    return false;
+  }
+
+  if (item.value.annotationCollection && annotations.value === null) {
+    return false;
+  }
+
+  if (collectionUrl) {
+    return manifests.value !== null && !!(collection.value) && !!(manifest.value);
+  }
+
+  if (manifestUrl) {
+    return !!(manifest.value);
+  }
+
+  return true;
+});
+const annotations = computed(() => store.getters['annotations/annotations']);
+const config = computed(() => store.getters['config/config']);
+const collection = computed(() => store.getters['contents/collection']);
+const item = computed(() => store.getters['contents/item']);
+const manifest = computed(() => store.getters['contents/manifest']);
+const manifests = computed(() => store.getters['contents/manifests']);
 
-    if (this.config?.colors?.accent) {
-      setCssVar('accent', this.config.colors.accent);
+onMounted(async () => {
+  isLoading.value = true;
+  $q.dark.set('auto');
+
+  await loadConfig();
+
+  i18nLocale.value = config.value.lang;
+
+  const colorsForceMode = config.value.colors.forceMode;
+
+  if (colorsForceMode && colorsForceMode !== 'none') {
+    $q.dark.set(colorsForceMode === 'dark');
+  }
+
+  if (config.value?.colors?.primary) {
+    setCssVar('primary', config.value.colors.primary);
+  }
+
+  if (config.value?.colors?.secondary) {
+    setCssVar('secondary', config.value.colors.secondary);
+  }
+
+  if (config.value?.colors?.accent) {
+    setCssVar('accent', config.value.colors.accent);
+  }
+
+  await init();
+})
+
+async function getCollection(url) {
+  await store.dispatch('contents/initCollection', url);
+}
+async function loadConfig() {
+  try {
+    const config = inject('config');
+    await store.dispatch('config/load', config);
+  } catch ({ title, message }) {
+    errorTitle.value = t('config_error');
+    errorMessage.value = message;
+  }
+}
+async function getManifest(url) {
+  await store.dispatch('contents/initManifest', url);
+}
+async function getItem(url) {
+  await store.dispatch('contents/initItem', url);
+}
+async function init() {
+  const { collection, manifest, item } = config.value;
+
+  try {
+    // We want to preload all required data that the components need.
+    // Initialize priority:
+    // We always load the item first as here is the main data that we want to display.
+    if (item) {
+      await getItem(item);
     }
 
-    await this.init();
-  },
-  methods: {
-    async getCollection(url) {
-      await this.$store.dispatch('contents/initCollection', url);
-    },
-    async loadConfig() {
-      try {
-        await this.$store.dispatch('config/load', this.$root.config);
-      } catch ({ title, message }) {
-        this.errorTitle = this.$t('config_error');
-        this.errorMessage = message;
-      }
-    },
-    async getManifest(url) {
-      await this.$store.dispatch('contents/initManifest', url);
-    },
-    async getItem(url) {
-      await this.$store.dispatch('contents/initItem', url);
-    },
-    async init() {
-      const { collection, manifest, item } = this.config;
-
-      try {
-        // We want to preload all required data that the components need.
-        // Initialize priority:
-        // We always load the item first as here is the main data that we want to display.
-        if (item) {
-          await this.getItem(item);
-        }
-
-        // After that we load additionally the parent objects.
-        // If a collection is given we ignore the manifest setting
-        // and try to figure out the correct manifest by searching for the above item.
-        // Otherwise, no collection is given but a single manifest instead, so we load that manifest.
-        if (collection) {
-          await this.getCollection(collection);
-        } else if (manifest) {
-          await this.getManifest(manifest);
-        }
-      } catch (e) {
-        await delay(1000);
-        this.errorTitle = e.title || 'unknown_error';
-        this.errorMessage = e.message || 'please_try_again_later';
-      } finally {
-        this.isLoading = false;
-      }
-    },
-    async onItemUrlChange(val) {
-      if (val) {
-        this.isLoading = false;
-      }
-    },
-  },
-};
+    // After that we load additionally the parent objects.
+    // If a collection is given we ignore the manifest setting
+    // and try to figure out the correct manifest by searching for the above item.
+    // Otherwise, no collection is given but a single manifest instead, so we load that manifest.
+    if (collection) {
+      await getCollection(collection);
+    } else if (manifest) {
+      await getManifest(manifest);
+    }
+  } catch (e) {
+    await delay(1000);
+    errorTitle.value = e.title || 'unknown_error';
+    errorMessage.value = e.message || 'please_try_again_later';
+  } finally {
+    isLoading.value = false;
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/ContentView.vue b/src/components/ContentView.vue
index 1d6d8776..0419f540 100644
--- a/src/components/ContentView.vue
+++ b/src/components/ContentView.vue
@@ -16,93 +16,80 @@
   </div>
 </template>
 
-<script>
-import DomMixin from '@/mixins/dom';
+<script setup>
 import Notification from '@/components/Notification.vue';
+
+import { computed, readonly, ref, watch } from 'vue';
+import { useStore } from 'vuex';
 import { request } from '@/utils/http';
 import { domParser, delay } from '@/utils';
 
-export default {
-  name: 'ContentView',
-  components: {
-    Notification,
-  },
-  mixins: [DomMixin],
-  props: {
-    url: String,
-    type: String,
-    fontSize: Number,
-  },
-  data: () => ({
-    content: '',
-    errorTextMessage: null,
-  }),
-  computed: {
-    manifest() {
-      return this.$store.getters['contents/manifest'];
-    },
-    config() {
-      return this.$store.getters['config/config'];
-    },
-    contentStyle() {
-      return {
-        fontSize: `${this.fontSize}px`,
-      };
-    },
-    notificationMessage() {
-      return this.errorTextMessage;
-    },
-  },
-  watch: {
-    url: {
-      handler: 'loadContent',
-      immediate: true,
-    },
-  },
-  methods: {
-    async loadContent(url) {
-      this.content = '';
-      try {
-        if (!url) {
-          return;
-        }
-        this.errorTextMessage = '';
-        this.$emit('loading', true);
-        await delay(300);
-        const data = await request(url);
-        this.isValidTextContent(data);
-
-        const dom = domParser(data);
-        this.content = dom.documentElement.innerHTML;
-        setTimeout(async () => {
-          this.$emit('loading', false);
-          const root = document.getElementById('text-content');
-          this.$store.dispatch('annotations/addHighlightAttributesToText', root);
-          await this.$store.dispatch('annotations/addHighlightClickListeners');
-
-          // TODO: Enable Hover + Tooltip feature when reqs are clarified
-          // await this.$store.dispatch('annotations/addHighlightHoverListeners');
-
-          this.$store.commit('contents/setActiveContentUrl', this.url);
-        }, 100);
-      } catch (err) {
-        this.errorTextMessage = err.message;
-      }
-    },
-    isValidTextContent(text) {
-      let parsed;
-      try {
-        parsed = JSON.parse(text);
-      } catch (err) {
-        // TODO : Handle json parsing more gracefully
-      }
-
-      if (parsed && parsed.status === 500) {
-        throw new Error('no_text_in_view');
-      }
-    },
-  },
-};
+const props = defineProps({
+  url: String,
+  type: String,
+  fontSize: Number,
+});
+const emit = defineEmits(['loading']);
+
+const store = useStore();
+
+const content = ref('');
+const errorTextMessage = ref(null);
+const notificationMessage = readonly(errorTextMessage);
+
+const manifest = computed(() => store.getters['contents/manifest']);
+const config = computed(() => store.getters['config/config']);
+const contentStyle = computed(() => ({
+  fontSize: `${props.fontSize}px`,
+}));
+
+watch(
+  () => props.url,
+  loadContent,
+  { immediate: true },
+);
+async function loadContent(url) {
+  content.value = '';
+  try {
+    if (!url) {
+      return;
+    }
+    errorTextMessage.value = '';
+    emit('loading', true);
+    await delay(300);
+    const data = await request(url);
+    isValidTextContent(data);
+
+    const dom = domParser(data);
+    content.value = dom.documentElement.innerHTML;
+    setTimeout(async () => {
+      emit('loading', false);
+      const root = document.getElementById('text-content');
+      store.dispatch('annotations/addHighlightAttributesToText', root);
+      await store.dispatch('annotations/addHighlightClickListeners');
+
+      // TODO: Enable Hover + Tooltip feature when reqs are clarified
+      // await store.dispatch('annotations/addHighlightHoverListeners');
+
+      store.commit('contents/setActiveContentUrl', props.url);
+    }, 100);
+  } catch (err) {
+    errorTextMessage.value = err.message;
+  }
+}
+
+function isValidTextContent(text) {
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch (err) {
+    // TODO : Handle json parsing more gracefully
+  }
+
+  if (parsed && parsed.status === 500) {
+    throw new Error('no_text_in_view');
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ImageView.vue b/src/components/ImageView.vue
index f0f0f18f..97d6e5c0 100644
--- a/src/components/ImageView.vue
+++ b/src/components/ImageView.vue
@@ -7,91 +7,80 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import OpenSeadragon from 'openseadragon';
-import { delay } from '@/utils';
 import Notification from '@/components/Notification.vue';
 
-export default {
-  name: 'ImageView',
-  components: {
-    Notification,
-  },
-  data() {
-    return {
-      viewer: null,
-      error: null,
-    };
-  },
-  computed: {
-    item() {
-      return this.$store.getters['contents/item'];
-    },
-    imageUrl() {
-      return this.item.image?.id;
-    },
-    options() {
-      return {
-        id: 'openseadragon',
-        tileSources: {
-          type: 'image',
-          url: this.imageUrl,
-        },
-        maxZoomLevel: 10,
-        zoomInButton: 'zoom-in',
-        zoomOutButton: 'zoom-out',
-        homeButton: 'default',
-        fullPageButton: 'fullscreen',
-      };
-    },
-  },
-  watch: {
-    item: {
-      async handler() {
-        if (!this.item.image) {
-          this.error = { message: 'no_image_available' };
-          return;
-        }
-        this.$emit('loading', true);
-        try {
-          const response = await fetch(this.item.image.id);
-
-          if (response.status === 500) throw { message: 'error_image_not_exists' };
-
-          if (response.status !== 200 && response.status !== 201) throw { message: 'error_vpn' };
-
-          this.error = null;
-          await delay(1000);
-          this.initOpenSeagragon();
-        } catch (error) {
-          this.error = error;
-          this.$emit('loading', false);
-        }
-      },
-      immediate: true,
-    },
+import { computed, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import { delay } from '@/utils';
+
+const emit = defineEmits('loading');
+
+const store = useStore();
+
+const viewer = ref(null);
+const error = ref(null);
+
+const item = computed(() => store.getters['contents/item']);
+const imageUrl = computed(() => item.value?.image?.id);
+const options = computed(() => ({
+  id: 'openseadragon',
+  tileSources: {
+    type: 'image',
+    url: imageUrl.value,
   },
-  methods: {
-    initOpenSeagragon() {
-      if (this.viewer) {
-        this.viewer.destroy();
-        this.viewer = null;
-      }
-
-      this.viewer = new OpenSeadragon.Viewer(this.options);
-      this.viewer.controlsFadeDelay = 1000;
-
-      this.viewer.addHandler('tile-loaded', () => {
-        this.$emit('loading', false);
-      });
-
-      this.viewer.addHandler('open-failed', () => {
-        this.error = { message: 'error_open_image' };
-        this.$emit('loading', false);
-      });
-    },
+  maxZoomLevel: 10,
+  zoomInButton: 'zoom-in',
+  zoomOutButton: 'zoom-out',
+  homeButton: 'default',
+  fullPageButton: 'fullscreen',
+}));
+
+watch(
+  item,
+  async () => {
+    if (!item.value?.image) {
+      error.value = { message: 'no_image_available' };
+      return;
+    }
+    emit('loading', true);
+    try {
+      const response = await fetch(item.value.image.id);
+
+      if (response.status === 500) throw { message: 'error_image_not_exists' };
+
+      if (response.status !== 200 && response.status !== 201) throw { message: 'error_vpn' };
+
+      error.value = null;
+      await delay(1000);
+      initOpenSeagragon();
+    } catch (error) {
+      error.value = error;
+      emit('loading', false);
+    }
   },
-};
+  { immediate: true },
+)
+
+function initOpenSeagragon() {
+  if (viewer.value) {
+    viewer.value.destroy();
+    viewer.value = null;
+  }
+
+  viewer.value = new OpenSeadragon.Viewer(options.value);
+  viewer.value.controlsFadeDelay = 1000;
+
+  viewer.value.addHandler('tile-loaded', () => {
+    emit('loading', false);
+  });
+
+  viewer.value.addHandler('open-failed', () => {
+    error.value = { message: 'error_open_image' };
+    emit('loading', false);
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index ba137920..fa66092d 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -12,22 +12,18 @@
   </q-inner-loading>
 </template>
 
-<script>
+<script setup>
+import { useQuasar } from 'quasar';
 
-export default {
-  name: 'Loading',
-  props: {
-    background: String,
-  },
-  data: () => ({
-    loading: true,
-  }),
-  methods: {
-    getBackground() {
-      if (!this.background) return this.$q.dark.isActive ? 'bg-grey-9' : 'bg-white';
-      if (this.background === 'none') return 'bg-transparent';
-      return this.background;
-    },
-  },
-};
+const props = defineProps({
+  background: String,
+});
+
+const $q = useQuasar();
+
+function getBackground() {
+  if (!props.background) return $q.dark.isActive ? 'bg-grey-9' : 'bg-white';
+  if (props.background === 'none') return 'bg-transparent';
+  return props.background;
+}
 </script>
diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index 0b10cd71..41bc56eb 100644
--- a/src/components/Notification.vue
+++ b/src/components/Notification.vue
@@ -16,54 +16,45 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { biInfoCircleFill, biExclamationTriangleFill } from '@quasar/extras/bootstrap-icons';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
 
-export default {
-  name: 'Notification',
-  props: {
-    message: {
-      type: String,
-      default: () => '',
-    },
-    title: String,
-    type: {
-      type: String,
-      default: () => '',
-    },
+const props = defineProps({
+  message: {
+    type: String,
+    default: () => '',
   },
-  data() {
-    return {
-
-    };
-  },
-  computed: {
-    config() {
-      return this.$store.getters['config/config'];
-    },
-    notificationColors() {
-      return this.config.notificationColors;
-    },
-    color() {
-      switch (this.type) {
-        case 'info':
-          return this.notificationColors?.info ? this.notificationColors.info : '';
-        case 'warning':
-          return this.notificationColors?.warning ? this.notificationColors.warning : '';
-        default:
-          return '';
-      }
-    },
-    icon() {
-      switch (this.type) {
-        case 'info':
-          return biInfoCircleFill;
-        case 'warning':
-          return biExclamationTriangleFill;
-        default:
-          return '';
-      }
-    },
+  title: String,
+  type: {
+    type: String,
+    default: () => '',
   },
-};
+});
+
+const store = useStore();
+
+const config = computed(() => store.getters['config/config']);
+const notificationColors = computed(() => config.value.notificationColors);
+const color = computed(() => {
+  switch (props.type) {
+    case 'info':
+      return notificationColors.value?.info ? notificationColors.value.info : '';
+    case 'warning':
+      return notificationColors.value?.warning ? notificationColors.value.warning : '';
+    default:
+      return '';
+  }
+});
+const icon = computed(() => {
+  switch (props.type) {
+    case 'info':
+      return biInfoCircleFill;
+    case 'warning':
+      return biExclamationTriangleFill;
+    default:
+      return '';
+  }
+});
 </script>
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index f0d9ba7d..f0ccca02 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -19,211 +19,202 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { biChevronRight } from '@quasar/extras/bootstrap-icons';
 import { delay, isElementVisible } from '@/utils';
 import { request } from '@/utils/http';
 
-async function getManifest(url) {
-  return request(url);
+import { computed, nextTick, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits(['loading'])
+
+const expandIcon = biChevronRight;
+const store = useStore();
+const { t } = useI18n();
+
+const isLoading = ref(false);
+const expanded = ref([]);
+const selected = ref(null);
+const tree = ref([]);
+const treeRef = ref(null);
+const containerRef = ref(null);
+
+const config = computed(() => store.getters['config/config']);
+const collectionTitle = computed(() => store.getters['contents/collectionTitle']);
+const collection = computed(() => store.getters['contents/collection']);
+const labels = computed(() => (config.value && config.value.labels) || {});
+const item = computed(() => store.getters['contents/item']);
+const itemUrl = computed(() => store.getters['contents/itemUrl']);
+const manifest = computed(() => store.getters['contents/manifest']);
+const manifests = computed(() => store.getters['contents/manifests']);
+
+watch(
+  itemUrl,
+  onItemUrlChange,
+)
+async function onItemUrlChange() {
+  selected.value = itemUrl.value;
 }
 
-export default {
-  name: 'TreeView',
-  data() {
-    return {
-      isLoading: false,
-      expanded: [],
-      selected: null,
-      tree: [],
-      treeRef: null,
-    };
-  },
-  computed: {
-    config() {
-      return this.$store.getters['config/config'];
-    },
-    collectionTitle() {
-      return this.$store.getters['contents/collectionTitle'];
-    },
-    collection() {
-      return this.$store.getters['contents/collection'];
-    },
-    labels() {
-      return this.config.labels || {};
-    },
-    item() {
-      return this.$store.getters['contents/item'];
-    },
-    itemUrl() {
-      return this.$store.getters['contents/itemUrl'];
-    },
-    manifest() {
-      return this.$store.getters['contents/manifest'];
-    },
-    manifests() {
-      return this.$store.getters['contents/manifests'];
-    },
-  },
-  watch: {
-    itemUrl: {
-      handler: 'onItemUrlChange',
-    },
-    collection: {
-      handler: 'onCollectionChange',
-      immediate: true,
-    },
-    manifest: {
-      handler: 'onManifestChange',
-      immediate: true,
-    },
-    selected: {
-      handler: 'onSelectedChange',
-      immediate: true,
-    },
-  },
-  created() {
-    this.expandIcon = biChevronRight;
-  },
-  methods: {
-    async onCollectionChange() {
-      if (this.collection) {
-        this.$emit('loading', true);
-        this.tree = [{
-          label: this.collectionTitle,
-          selectable: false,
-          url: this.collectionTitle,
-          children: this.collection.sequence.map(({ label: manifestLabel, id: manifestId }, i) => ({
-            label: manifestLabel ?? this.getDefaultManifestLabel(i),
-            lazy: this.manifest.id !== manifestId,
-            url: manifestId,
-            selectable: false,
-            // Prerender item tree elements for the manifest that should be open at initial load
-            // and don't render children on every other manifest. They will be lazy loaded on expand.
-            ...((this.manifest.id === manifestId)
-              ? {
-                children: this.manifest.sequence.map(({ id, label: itemLabel }, j) => ({
-                  label: itemLabel ?? this.getDefaultItemLabel(j),
-                  url: id,
-                  parent: manifestId,
-                })),
-              }
-              : {}),
+watch(
+  collection,
+  onCollectionChange,
+  { immediate: true },
+)
+async function onCollectionChange() {
+  if (collection.value) {
+    emit('loading', true);
+    tree.value = [{
+      label: collectionTitle.value,
+      selectable: false,
+      url: collectionTitle.value,
+      children: collection.value.sequence.map(({ label: manifestLabel, id: manifestId }, i) => ({
+        label: manifestLabel ?? getDefaultManifestLabel(i),
+        lazy: manifest.value.id !== manifestId,
+        url: manifestId,
+        selectable: false,
+        // Prerender item tree elements for the manifest that should be open at initial load
+        // and don't render children on every other manifest. They will be lazy loaded on expand.
+        ...((manifest.value.id === manifestId)
+          ? {
+            children: manifest.value.sequence.map(({ id, label: itemLabel }, j) => ({
+              label: itemLabel ?? getDefaultItemLabel(j),
+              url: id,
+              parent: manifestId,
+            })),
           }
-          )),
-        }];
-
-        this.$nextTick(() => {
-          this.expanded = [this.collectionTitle, this.manifest.id];
-          this.selected = this.itemUrl !== '' ? this.itemUrl : this.manifest.sequence[0]?.id;
-        });
-      }
-    },
-    async onManifestChange() {
-      const { label, sequence, id: manifestId } = this.manifest;
-      if (!this.collection) {
-        this.$emit('loading', true);
-        await delay(300);
-
-        this.tree = [{
-          label: label ?? this.getDefaultManifestLabel(),
-          sequence,
-          url: manifestId,
-          selectable: false,
-          children: (Array.isArray(sequence) ? sequence : [sequence]).map(({ id: itemId, label: itemLabel }, j) => ({
-            label: itemLabel ?? this.getDefaultItemLabel(j),
-            url: itemId,
-            parent: manifestId,
-          })),
-        }];
+          : {}),
       }
+      )),
+    }];
 
-      this.$nextTick(() => {
-        const node = this.$refs.treeRef.getNodeByKey(manifestId);
-
-        // We need to remove the lazy loading off of this manifest node and insert children manually,
-        // because Quasar does not trigger lazy loading on this.expanded change.
-        node.lazy = false;
-        node.children = this.manifest.sequence.map(({ id, label: itemLabel }, j) => ({
-          label: itemLabel ?? this.getDefaultItemLabel(j),
-          url: id,
-          parent: manifestId,
-        }));
-        this.expanded.push(manifestId);
-
-        this.selected = this.itemUrl !== '' ? this.itemUrl : sequence[0]?.id;
-      });
-    },
-    async onItemUrlChange() {
-      this.selected = this.itemUrl;
-    },
-    async onLazyLoad({ node, fail, done }) {
-      const { url, children } = node;
-      if (!url) {
-        done(children);
-        return;
-      }
+    nextTick(() => {
+      expanded.value = [collectionTitle.value, manifest.value.id];
+      selected.value = itemUrl.value !== '' ? itemUrl.value : manifest.value.sequence[0]?.id;
+    });
+  }
+}
 
-      const manifest = await getManifest(url);
+watch(
+  manifest,
+  onManifestChange,
+  { immediate: true },
+)
+async function onManifestChange() {
+  const { label, sequence, id: manifestId } = manifest.value;
+  if (!collection.value) {
+    emit('loading', true);
+    await delay(300);
+
+    tree.value = [{
+      label: label ?? getDefaultManifestLabel(),
+      sequence,
+      url: manifestId,
+      selectable: false,
+      children: (Array.isArray(sequence) ? sequence : [sequence]).map(({ id: itemId, label: itemLabel }, j) => ({
+        label: itemLabel ?? getDefaultItemLabel(j),
+        url: itemId,
+        parent: manifestId,
+      })),
+    }];
+  }
 
-      if (!manifest) {
-        fail();
-        return;
-      }
+  nextTick(() => {
+    const node = treeRef.value.getNodeByKey(manifestId);
+
+    // We need to remove the lazy loading off of this manifest node and insert children manually,
+    // because Quasar does not trigger lazy loading on this.expanded change.
+    node.lazy = false;
+    node.children = manifest.value.sequence.map(({ id, label: itemLabel }, j) => ({
+      label: itemLabel ?? getDefaultItemLabel(j),
+      url: id,
+      parent: manifestId,
+    }));
+    expanded.value.push(manifestId);
+
+    selected.value = itemUrl.value !== '' ? itemUrl.value : sequence[0]?.id;
+  });
+}
 
-      const itemNodes = manifest.sequence.map(({ id, label: itemLabel }, j) => ({
-        label: itemLabel ?? this.getDefaultItemLabel(j),
-        url: id,
-        parent: manifest.id,
-      }));
-
-      if (itemNodes) done(itemNodes);
-      else fail();
-    },
-    onSelectedChange(value) {
-      const { treeRef } = this.$refs;
-      if (!treeRef) return;
-
-      const node = treeRef.getNodeByKey(value);
-      if (!node) return;
-
-      const { url: itemUrl, parent: manifestUrl } = node;
-
-      this.$nextTick(async () => {
-        await delay(600);
-        const el = document.getElementById(this.itemUrl);
-        if (el && !isElementVisible(el, this.$refs.containerRef)) {
-          this.scrollIntoView(el);
-        }
-        await delay(100);
-        this.$emit('loading', false);
-      });
+watch(
+  selected,
+  onSelectedChange,
+  { immediate: true },
+)
+function onSelectedChange(value) {
+  if (!treeRef.value) return;
 
-      if (itemUrl === this.itemUrl) return;
+  const node = treeRef.value.getNodeByKey(value);
+  if (!node) return;
 
-      if (manifestUrl !== this.manifest.id) {
-        this.$store.dispatch('contents/initManifest', manifestUrl);
-        this.$store.dispatch('config/setDefaultActiveViews');
-        this.expanded.push(manifestUrl);
-      }
+  const { url: _itemUrl, parent: _manifestUrl } = node;
+
+  nextTick(async () => {
+    await delay(600);
+    const el = document.getElementById(itemUrl.value);
+    if (el && !isElementVisible(el, containerRef.value)) {
+      scrollIntoView(el);
+    }
+    await delay(100);
+    emit('loading', false);
+  });
+
+  if (_itemUrl === itemUrl.value) return;
 
-      if (!this.expanded.includes(manifestUrl)) this.expanded.push(manifestUrl);
-
-      this.$store.dispatch('contents/initItem', itemUrl);
-    },
-    getDefaultManifestLabel(index) {
-      const prefix = this.labels.manifest ?? this.$t('manifest');
-      return `${prefix} ${index !== undefined ? index + 1 : ''}`;
-    },
-    getDefaultItemLabel(index) {
-      const prefix = this.labels.item ?? this.$t('page');
-      return `${prefix} ${index + 1}`;
-    },
-    scrollIntoView(el) {
-      el.scrollIntoView({ block: 'center', behavior: 'smooth' });
-    },
-  },
-};
+  if (_manifestUrl !== manifest.value.id) {
+    store.dispatch('contents/initManifest', _manifestUrl);
+    store.dispatch('config/setDefaultActiveViews');
+    expanded.value.push(_manifestUrl);
+  }
+
+  if (!expanded.value.includes(_manifestUrl)) expanded.value.push(_manifestUrl);
+
+  store.dispatch('contents/initItem', _itemUrl);
+}
+
+async function getManifest(url) {
+  return request(url);
+}
+
+async function onLazyLoad({ node, fail, done }) {
+  const { url, children } = node;
+  if (!url) {
+    done(children);
+    return;
+  }
+
+  const manifest = await getManifest(url);
+
+  if (!manifest) {
+    fail();
+    return;
+  }
+
+  const itemNodes = manifest.sequence.map(({ id, label: itemLabel }, j) => ({
+    label: itemLabel ?? getDefaultItemLabel(j),
+    url: id,
+    parent: manifest.id,
+  }));
+
+  if (itemNodes) done(itemNodes);
+  else fail();
+}
+
+function getDefaultManifestLabel(index) {
+  const prefix = labels.value.manifest ?? t('manifest');
+  return `${prefix} ${index !== undefined ? index + 1 : ''}`;
+}
+
+function getDefaultItemLabel(index) {
+  const prefix = labels.value.item ?? t('page');
+  return `${prefix} ${index + 1}`;
+}
+
+function scrollIntoView(el) {
+  el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/annotations/AnnotationIcon.vue b/src/components/annotations/AnnotationIcon.vue
index 5c00b24e..a627d2e2 100644
--- a/src/components/annotations/AnnotationIcon.vue
+++ b/src/components/annotations/AnnotationIcon.vue
@@ -6,33 +6,25 @@
     size="16px"
   />
 </template>
-<script>
+
+<script setup>
+import { computed } from 'vue';
 import { Dark } from 'quasar';
 import { isUrl } from '@/utils';
 import { icon } from '@/utils/icon';
 
-export default {
-  name: 'AnnotationIcon',
-  props: {
-    name: String,
-  },
-  computed: {
-    show() {
-      return !!(this.types.find((type) => type.name === this.contentType)?.icon);
-    },
-    isDarkMode() {
-      return Dark.isActive;
-    },
-    iconName() {
-      return isUrl(this.name) ? `img:${this.name}` : this.getIcon(this.name);
-    },
-  },
-  methods: {
-    getIcon(name) {
-      return icon(name);
-    },
-  },
-};
+const props = defineProps({
+  name: String,
+});
+
+const isDarkMode = computed(() => Dark.isActive);
+const iconName = computed(() => (
+  isUrl(props.name) ? `img:${props.name}` : getIcon(props.name)
+));
+
+function getIcon() {
+  return icon(props.name);
+}
 </script>
 
 <style scoped>
diff --git a/src/components/annotations/AnnotationsList.vue b/src/components/annotations/AnnotationsList.vue
index 98c60c3e..99046239 100644
--- a/src/components/annotations/AnnotationsList.vue
+++ b/src/components/annotations/AnnotationsList.vue
@@ -22,51 +22,43 @@
   </q-list>
 </template>
 
-<script>
-
+<script setup>
 import AnnotationIcon from '@/components/annotations/AnnotationIcon.vue';
 
-export default {
-  name: 'AnnotationsList',
-  components: { AnnotationIcon },
-  props: {
-    activeAnnotation: {
-      type: Object,
-      default: () => {},
-    },
-    configuredAnnotations: {
-      type: Array,
-      default: () => [],
-    },
-    toggle: {
-      type: Function,
-      default: () => null,
-    },
-    types: Array,
+import { computed } from 'vue';
+
+const props = defineProps({
+  activeAnnotation: {
+    type: Object,
+    default: () => {},
   },
-  computed: {
-    config() {
-      return this.$store.getters['config/config'];
-    },
-    annotationTypesMapping() {
-      return this.types.reduce((prev, curr) => {
-        prev[curr.name] = curr.annotationType || 'annotation';
-        return prev;
-      }, {});
-    },
+  configuredAnnotations: {
+    type: Array,
+    default: () => [],
   },
-  methods: {
-    isActive(annotation) {
-      return !!this.activeAnnotation[annotation.id];
-    },
-    isText(annotation) {
-      return this.annotationTypesMapping[annotation.body['x-content-type']] === 'text';
-    },
-    getIconName(typeName) {
-      return this.types.find(({ name }) => name === typeName)?.icon || 'biPencilSquare';
-    },
+  toggle: {
+    type: Function,
+    default: () => null,
   },
-};
+  types: Array,
+});
+
+const annotationTypesMapping = computed(() => (
+  props.types.reduce((prev, curr) => {
+    prev[curr.name] = curr.annotationType || 'annotation';
+    return prev;
+  }, {})
+));
+
+function isActive(annotation) {
+  return !!props.activeAnnotation[annotation.id];
+}
+function isText(annotation) {
+  return annotationTypesMapping.value[annotation.body['x-content-type']] === 'text';
+}
+function getIconName(typeName) {
+  return props.types.find(({ name }) => name === typeName)?.icon || 'biPencilSquare';
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/annotations/AnnotationsView.vue b/src/components/annotations/AnnotationsView.vue
index f3bf00a9..3869265b 100644
--- a/src/components/annotations/AnnotationsView.vue
+++ b/src/components/annotations/AnnotationsView.vue
@@ -20,98 +20,79 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import AnnotationsList from '@/components/annotations/AnnotationsList.vue';
 import Notification from '@/components/Notification.vue';
 import * as AnnotationUtils from '@/utils/annotations';
 
-export default {
-  name: 'AnnotationsView',
-  components: {
-    AnnotationsList,
-    Notification,
-  },
-  data: () => ({
-    message: 'no_annotations_in_view',
-  }),
-  props: {
-    url: String,
-    types: Array,
-  },
-  computed: {
-    config() {
-      return this.$store.getters['config/config'];
-    },
-    annotations() {
-      return this.$store.getters['annotations/annotations'];
-    },
-    item() {
-      return this.$store.getters['contents/item'];
-    },
-    activeAnnotations() {
-      return this.$store.getters['annotations/activeAnnotations'];
-    },
-    filteredAnnotations() {
-      return this.$store.getters['annotations/filteredAnnotations'];
-    },
-    activeContentUrl() {
-      return this.$store.getters['contents/activeContentUrl'];
-    },
-    updateTextHighlighting() {
-      // We need to make sure that annotations are loaded (this.annotations),
-      // the text HTML is present in DOM (this.activeContentUrl is set after DOM update)
-      // and the annotation are filtered by type (this.filteredAnnotations).
-      return `${this.annotations !== null}|${this.activeContentUrl}`;
-    },
-  },
-  watch: {
-    updateTextHighlighting: {
-      handler(contentData) {
-        if (contentData) {
-          const [hasAnnotations, activeContentUrl] = contentData.split('|');
-          if (hasAnnotations !== 'true' && activeContentUrl === 'null') return;
-          this.$store.dispatch('annotations/setFilteredAnnotations', this.types);
-          this.highlightTargetsLevel0();
-        }
-      },
-      immediate: true,
-    },
-  },
-  beforeUnmount() {
-    return this.$store.dispatch('annotations/resetAnnotations');
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+
+const props = defineProps({
+  url: String,
+  types: Array,
+});
+
+const store = useStore();
+const message = ref('no_annotations_in_view');
+
+const config = computed(() => store.getters['config/config']);
+const annotations = computed(() => store.getters['annotations/annotations']);
+const activeAnnotations = computed(() => store.getters['annotations/activeAnnotations']);
+const filteredAnnotations = computed(() => store.getters['annotations/filteredAnnotations']);
+const activeContentUrl = computed(() => store.getters['contents/activeContentUrl']);
+const updateTextHighlighting = computed(() => {
+  // We need to make sure that annotations are loaded (this.annotations),
+  // the text HTML is present in DOM (this.activeContentUrl is set after DOM update)
+  // and the annotation are filtered by type (this.filteredAnnotations).
+  return `${annotations.value !== null}|${activeContentUrl.value}`;
+});
+
+watch(
+  updateTextHighlighting,
+  (contentData) => {
+   const [hasAnnotations, activeContentUrl] = contentData.split('|');
+   if (hasAnnotations !== 'true' && activeContentUrl === 'null') return;
+   store.dispatch('annotations/setFilteredAnnotations', props.types);
+   highlightTargetsLevel0();
   },
-  methods: {
-    addAnnotation(id) {
-      this.$store.dispatch('annotations/addActiveAnnotation', id);
-    },
-    removeAnnotation(id) {
-      this.$store.dispatch('annotations/removeActiveAnnotation', id);
-    },
-    toggle({ id }) {
-      const exists = !!this.activeAnnotations[id];
-      if (exists) {
-        this.removeAnnotation(id);
-      } else {
-        this.addAnnotation(id);
-      }
-    },
-    highlightTargetsLevel0() {
-      const mergedSelector = this.filteredAnnotations
-        .reduce((acc, cur) => {
-          const selector = AnnotationUtils.generateTargetSelector(cur);
-          if (acc !== '') {
-            acc += ',';
-          }
-          acc += selector;
-          return acc;
-        }, '');
+  { immediate: true },
+);
+
+onBeforeUnmount(() => store.dispatch('annotations/resetAnnotations'));
+
+function addAnnotation(id) {
+  store.dispatch('annotations/addActiveAnnotation', id);
+}
+
+function removeAnnotation(id) {
+  store.dispatch('annotations/removeActiveAnnotation', id);
+}
 
-      if (mergedSelector) {
-        AnnotationUtils.highlightTargets(mergedSelector, { level: 0 });
+function toggle({ id }) {
+  const exists = !!activeAnnotations.value[id];
+  if (exists) {
+    removeAnnotation(id);
+  } else {
+    addAnnotation(id);
+  }
+}
+
+function highlightTargetsLevel0() {
+  const mergedSelector = filteredAnnotations.value
+    .reduce((acc, cur) => {
+      const selector = AnnotationUtils.generateTargetSelector(cur);
+      if (acc !== '') {
+        acc += ',';
       }
-    },
-  },
-};
+      acc += selector;
+      return acc;
+    }, '');
+
+  if (mergedSelector) {
+    AnnotationUtils.highlightTargets(mergedSelector, { level: 0 });
+  }
+}
 </script>
 
 <style scoped>
diff --git a/src/components/header/GlobalHeader.vue b/src/components/header/GlobalHeader.vue
index 9ef0200f..32b1dec1 100644
--- a/src/components/header/GlobalHeader.vue
+++ b/src/components/header/GlobalHeader.vue
@@ -17,47 +17,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import Navbar from '@/components/header/Navbar.vue';
 import TitleBar from '@/components/header/TitleBar.vue';
 import PanelsToggle from '@/components/header/PanelsToggle.vue';
 import Tools from '@/components/header/Tools.vue';
 
-export default {
-  name: 'GlobalHeader',
-  components: {
-    Navbar,
-    TitleBar,
-    PanelsToggle,
-    Tools,
-  },
-  props: {
-    configErrorTitle: {
-      type: String,
-      default: () => '',
-    },
-  },
-  computed: {
-    show() {
-      return this.config.header?.show;
-    },
-    manifests() {
-      return this.$store.getters['contents/manifests'];
-    },
-    config() {
-      return this.$store.getters['config/config'];
-    },
-    item() {
-      return this.$store.getters['contents/item'];
-    },
-    showNavbar() {
-      return this.config.header?.navigation || true;
-    },
-    showPanelsToggle() {
-      return this.config.header?.panelsToggle !== undefined ? this.config.header?.panelsToggle : true;
-    },
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const props = defineProps({
+  configErrorTitle: {
+    type: String,
+    default: () => '',
   },
-};
+});
+
+const store = useStore();
+
+const show = computed(() => config.value?.header?.show);
+const manifests = computed(() => store.getters['contents/manifests']);
+const config = computed(() => store.getters['config/config']);
+const item = computed(() => store.getters['contents/item']);
+const showNavbar = computed(() => config.value?.header?.navigation || true);
+const showPanelsToggle = computed(() => config.value?.header?.panelsToggle !== undefined ? config.value?.header?.panelsToggle : true);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/header/Language.vue b/src/components/header/Language.vue
index 53252a1f..f297621c 100644
--- a/src/components/header/Language.vue
+++ b/src/components/header/Language.vue
@@ -19,42 +19,39 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 import { biTranslate } from '@quasar/extras/bootstrap-icons';
 
-export default {
-  name: 'Language',
-  data() {
-    return {
-      langs: [
-        { label: 'DE', value: 'de-de' },
-        { label: 'EN', value: 'en-US' },
-      ],
-      selectedLang: 'en-US',
-    };
-  },
-  watch: {
-    selectedLang(lang) {
-      this.$i18n.locale = lang;
-    },
-  },
-  created() {
-    this.icon = biTranslate;
-  },
-  mounted() {
-    this.selectedLang = this.config.lang || 'en-US';
-  },
-  computed: {
-    config() {
-      return this.$store.getters['config/config'];
-    },
-  },
-  methods: {
-    handleLanguageChange(lang) {
-      this.selectedLang = lang.value;
-    },
+const store = useStore();
+const { locale: i18nLocale } = useI18n();
+
+const langs = ref([
+  { label: 'DE', value: 'de-de' },
+  { label: 'EN', value: 'en-US' },
+]);
+const selectedLang = ref('en-US');
+
+const icon = biTranslate;
+
+const config = computed(() => store.getters['config/config']);
+
+watch(
+  selectedLang,
+  (lang) => {
+    i18nLocale.value = lang;
   },
-};
+);
+
+onMounted(() => {
+  selectedLang.value = config.value.lang || 'en-US';
+});
+
+function handleLanguageChange(lang) {
+  selectedLang.value = lang.value;
+}
 </script>
 
 <style lang="scss">
diff --git a/src/components/header/Navbar.vue b/src/components/header/Navbar.vue
index 5dbb3d48..bd40f55f 100644
--- a/src/components/header/Navbar.vue
+++ b/src/components/header/Navbar.vue
@@ -28,107 +28,96 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 import { biArrowLeft, biArrowRight } from '@quasar/extras/bootstrap-icons';
 
-export default {
-  name: 'Navbar',
-  computed: {
-    manifest() {
-      return this.$store.getters['contents/manifest'];
-    },
-    manifests() {
-      return this.$store.getters['contents/manifests'];
-    },
-    item() {
-      return this.$store.getters['contents/item'];
-    },
-    itemUrl() {
-      return this.$store.getters['contents/itemUrl'];
-    },
-    itemIndex() {
-      return this.manifest ? this.manifest.sequence.findIndex(({ id }) => id === this.itemUrl) : -1;
-    },
-    hasPrev() {
-      const prevIndex = this.itemIndex - 1;
-      if (prevIndex < 0) {
-        if (this.manifests === null) return false;
-        const prevManifestIndex = this.manifests.findIndex(({ id }) => id === this.manifest.id) - 1;
-        if (prevManifestIndex < 0) return false;
-      }
+const store = useStore();
+const { t } = useI18n();
 
-      return true;
-    },
-    hasNext() {
-      const nextIndex = this.itemIndex + 1;
-      if (nextIndex > this.manifest.sequence.length - 1) {
-        if (this.manifests === null) return false;
-        const nextManifestIndex = this.manifests.findIndex(({ id }) => id === this.manifest.id) + 1;
-        if (nextManifestIndex > this.manifests.length - 1) return false;
-      }
-      return true;
-    },
-    nextButtonLabel() {
-      return this.itemIndex === this.manifest.sequence.length - 1
-        ? `${this.$t('next')} ${this.$t(this.labels.manifest)}`
-        : `${this.$t('next')} ${this.$t(this.labels.item)}`;
-    },
+const prevIcon = biArrowLeft;
+const nextIcon = biArrowRight;
 
-    prevButtonLabel() {
-      return this.itemIndex === 0
-        ? `${this.$t('prev')} ${this.$t(this.labels.manifest)}`
-        : `${this.$t('prev')} ${this.$t(this.labels.item)}`;
-    },
-    labels() {
-      return this.$store.getters['config/config'].labels || {
-        manifest: 'manifest',
-        item: 'item',
-      };
-    },
-  },
-  created() {
-    this.prevIcon = biArrowLeft;
-    this.nextIcon = biArrowRight;
-  },
-  methods: {
-    prev() {
-      const prevIndex = this.itemIndex - 1;
-      let itemUrl = '';
+const manifest = computed(() => store.getters['contents/manifest']);
+const manifests = computed(() => store.getters['contents/manifests']);
+const item = computed(() => store.getters['contents/item']);
+const itemUrl = computed(() => store.getters['contents/itemUrl']);
+const itemIndex = computed(() => manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) : -1);
+const hasPrev = computed(() => {
+  const prevIndex = itemIndex.value - 1;
+  if (prevIndex < 0) {
+    if (manifests.value === null) return false;
+    const prevManifestIndex = manifests.value.findIndex(({ id }) => id === manifest.value.id) - 1;
+    if (prevManifestIndex < 0) return false;
+  }
+
+  return true;
+});
+const hasNext = computed(() => {
+  const nextIndex = itemIndex.value + 1;
+  if (nextIndex > manifest.value.sequence.length - 1) {
+    if (manifests.value === null) return false;
+    const nextManifestIndex = manifests.value.findIndex(({ id }) => id === manifest.value.id) + 1;
+    if (nextManifestIndex > manifests.value.length - 1) return false;
+  }
+  return true;
+});
+const nextButtonLabel = computed(() => {
+  return itemIndex.value === manifest.value.sequence.length - 1
+    ? `${t('next')} ${t(labels.value.manifest)}`
+    : `${t('next')} ${t(labels.value.item)}`;
+});
+const prevButtonLabel = computed(() => {
+  return itemIndex.value === 0
+    ? `${t('prev')} ${t(labels.value.manifest)}`
+    : `${t('prev')} ${t(labels.value.item)}`;
+});
+const labels = computed(() => {
+  return store.getters['config/config'].labels || {
+    manifest: 'manifest',
+    item: 'item',
+  };
+});
 
-      if (prevIndex < 0) {
-        // If the index is lower than 0, we will load the prev manifest's last item
-        const prevManifestIndex = this.manifests.findIndex(({ id }) => id === this.manifest.id) - 1;
-        if (prevManifestIndex < 0) return;
+function prev() {
+  const prevIndex = itemIndex.value - 1;
+  let itemUrl = '';
 
-        const prevManifest = this.manifests[prevManifestIndex];
-        this.$store.commit('contents/setManifest', prevManifest);
-        this.$store.dispatch('config/setDefaultActiveViews');
-        itemUrl = prevManifest.sequence[prevManifest.sequence.length - 1].id;
-      } else {
-        // We load the previous item
-        itemUrl = this.manifest.sequence[prevIndex].id;
-      }
-      this.$store.dispatch('contents/initItem', itemUrl);
-    },
-    next() {
-      const nextIndex = this.itemIndex + 1;
-      let itemUrl = '';
+  if (prevIndex < 0) {
+    // If the index is lower than 0, we will load the prev manifest's last item
+    const prevManifestIndex = manifests.value.findIndex(({ id }) => id === manifest.value.id) - 1;
+    if (prevManifestIndex < 0) return;
 
-      if (nextIndex > this.manifest.sequence.length - 1) {
-        const nextManifestIndex = this.manifests.findIndex(({ id }) => id === this.manifest.id) + 1;
-        if (nextManifestIndex > this.manifests.length - 1) return;
+    const prevManifest = manifests.value[prevManifestIndex];
+    store.commit('contents/setManifest', prevManifest);
+    store.dispatch('config/setDefaultActiveViews');
+    itemUrl = prevManifest.sequence[prevManifest.sequence.length - 1].id;
+  } else {
+    // We load the previous item
+    itemUrl = manifest.value.sequence[prevIndex].id;
+  }
+  store.dispatch('contents/initItem', itemUrl);
+}
 
-        const nextManifest = this.manifests[nextManifestIndex];
-        this.$store.commit('contents/setManifest', nextManifest);
-        this.$store.dispatch('config/setDefaultActiveViews');
-        itemUrl = nextManifest.sequence[0].id;
-      } else {
-        itemUrl = this.manifest.sequence[nextIndex].id;
-      }
-      this.$store.dispatch('contents/initItem', itemUrl);
-    },
-  },
-};
+function next() {
+  const nextIndex = itemIndex.value + 1;
+  let itemUrl = '';
+
+  if (nextIndex > manifest.value.sequence.length - 1) {
+    const nextManifestIndex = manifests.value.findIndex(({ id }) => id === manifest.value.id) + 1;
+    if (nextManifestIndex > manifests.value.length - 1) return;
+
+    const nextManifest = manifests.value[nextManifestIndex];
+    store.commit('contents/setManifest', nextManifest);
+    store.dispatch('config/setDefaultActiveViews');
+    itemUrl = nextManifest.sequence[0].id;
+  } else {
+    itemUrl = manifest.value.sequence[nextIndex].id;
+  }
+  store.dispatch('contents/initItem', itemUrl);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/header/PanelsToggle.vue b/src/components/header/PanelsToggle.vue
index b69214eb..323af5d5 100644
--- a/src/components/header/PanelsToggle.vue
+++ b/src/components/header/PanelsToggle.vue
@@ -74,84 +74,84 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 import {
-  biCheckCircleFill, biCircle, biArrowCounterclockwise, biChevronDown,
+  biCheckCircleFill,
+  biCircle,
+  biArrowCounterclockwise,
+  biChevronDown,
 } from '@quasar/extras/bootstrap-icons';
 
-export default {
-  name: 'PanelsToggle',
-  data: () => ({
-    toggles: [],
-    showDropdown: false,
-  }),
-  computed: {
-    panels() {
-      return this.$store.getters['config/config'].panels;
-    },
-    resetColor() {
-      return this.toggles.filter(({ show }) => !show).length > 0 ? 'primary' : 'grey-7';
-    },
-  },
-  watch: {
-    panels: {
-      handler(value) {
-        this.toggles = value
-          .filter(({ toggle }) => toggle === true)
-          .map(({ show, label }, index) => ({ index, show, label }));
-      },
-      immediate: true,
-    },
-    showDropdown: {
-      handler(value) {
-        const tido = document.getElementById('tido');
-        let backdrop = tido.querySelector('#tido-backdrop');
-        if (value) {
-          if (!backdrop) {
-            const el = document.createElement('div');
-            el.id = 'tido-backdrop';
-            tido.appendChild(el);
-            backdrop = tido.querySelector('#tido-backdrop');
-            backdrop.clickOutsideEvent = () => {
-              this.showDropdown = false;
-            };
-            backdrop.addEventListener('click', backdrop.clickOutsideEvent);
-          }
-        } else if (backdrop) backdrop.remove();
-      },
-    },
-  },
-  created() {
-    this.checkedIcon = biCheckCircleFill;
-    this.uncheckedIcon = biCircle;
-    this.resetIcon = biArrowCounterclockwise;
-    this.dropdownIcon = biChevronDown;
+const store = useStore();
+const { t } = useI18n();
+
+const toggles = ref([]);
+const showDropdown = ref(false);
+
+const checkedIcon = biCheckCircleFill;
+const uncheckedIcon = biCircle;
+const resetIcon = biArrowCounterclockwise;
+const dropdownIcon = biChevronDown;
+
+const panels = computed(() => store.getters['config/config'].panels);
+const resetColor = computed(() => toggles.value.filter(({ show }) => !show).length > 0 ? 'primary' : 'grey-7');
+
+watch(
+  panels,
+  (value) => {
+    toggles.value = value
+      .filter(({ toggle }) => toggle === true)
+      .map(({ show, label }, index) => ({ index, show, label }));
   },
-  methods: {
-    update(index, show) {
-      this.toggles[index].show = show;
-      this.$store.dispatch('config/setShowPanel', { index, show });
-    },
-
-    reset() {
-      this.toggles.forEach((toggle, index) => {
-        this.toggles[index].show = true;
-        this.$store.dispatch('config/setShowPanel', { index, show: true });
-      });
-    },
-
-    // display toggle title when hovering
-    handleToggleTitle(idx) {
-      const titleName = this.$t(this.toggles[idx].label);
-      const titleUpper = `${titleName[0].toUpperCase()}${titleName.slice(1)}`;
-
-      return this.toggles[idx].show
-        ? `${this.$t('hide')} ${titleUpper} Panel`
-        : `${this.$t('show')} ${titleUpper} Panel`;
-    },
+  { immediate: true },
+)
+
+watch(
+  showDropdown,
+  (value) => {
+    const tido = document.getElementById('tido');
+    let backdrop = tido.querySelector('#tido-backdrop');
+    if (value) {
+      if (!backdrop) {
+        const el = document.createElement('div');
+        el.id = 'tido-backdrop';
+        tido.appendChild(el);
+        backdrop = tido.querySelector('#tido-backdrop');
+        backdrop.clickOutsideEvent = () => {
+          showDropdown.value = false;
+        };
+        backdrop.addEventListener('click', backdrop.clickOutsideEvent);
+      }
+    } else if (backdrop) backdrop.remove();
   },
-};
+)
+
+function update(index, show) {
+  toggles.value[index].show = show;
+  store.dispatch('config/setShowPanel', { index, show });
+}
+
+function reset() {
+  toggles.value.forEach((toggle, index) => {
+    toggles.value[index].show = true;
+    store.dispatch('config/setShowPanel', { index, show: true });
+  });
+}
+
+// display toggle title when hovering
+function handleToggleTitle(idx) {
+  const titleName = t(toggles.value[idx].label);
+  const titleUpper = `${titleName[0].toUpperCase()}${titleName.slice(1)}`;
+
+  return toggles.value[idx].show
+    ? `${t('hide')} ${titleUpper} Panel`
+    : `${t('show')} ${titleUpper} Panel`;
+}
 </script>
+
 <style lang="scss">
 .dropdown-list {
   position: absolute;
diff --git a/src/components/header/SoftwareInfo.vue b/src/components/header/SoftwareInfo.vue
index ecdbceb8..b4a5a841 100644
--- a/src/components/header/SoftwareInfo.vue
+++ b/src/components/header/SoftwareInfo.vue
@@ -66,35 +66,27 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref } from 'vue';
 import {
   biInfoLg, biBook, biCodeSlash, biBugFill,
 } from '@quasar/extras/bootstrap-icons';
 import packageInfo from '../../../package.json';
 
-export default {
-  name: 'SoftwareInfo',
-  data() {
-    return {
-      infobox: false,
-      tidoVersion: '',
-    };
-  },
-  computed: {
-    actualYear() {
-      const d = new Date();
-      return d.getFullYear();
-    },
-  },
-  created() {
-    this.tidoVersion = packageInfo.version;
-    this.infoIcon = biInfoLg;
-    this.docsIcon = biBook;
-    this.codeIcon = biCodeSlash;
-    this.bugIcon = biBugFill;
-  },
-};
+const infobox = ref(false);
+
+const tidoVersion = packageInfo.version;
+const infoIcon = biInfoLg;
+const docsIcon = biBook;
+const codeIcon = biCodeSlash;
+const bugIcon = biBugFill;
+
+const actualYear = computed(() => {
+  const d = new Date();
+  return d.getFullYear();
+})
 </script>
+
 <style lang="scss">
 .q-dialog {
   .tido {
diff --git a/src/components/header/TitleBar.vue b/src/components/header/TitleBar.vue
index 707b9a10..34e0821f 100644
--- a/src/components/header/TitleBar.vue
+++ b/src/components/header/TitleBar.vue
@@ -37,27 +37,21 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
 import { biChevronRight } from '@quasar/extras/bootstrap-icons';
 
-export default {
-  name: 'Titlebar',
-  props: {
-    item: {
-      type: Object,
-      default: () => {},
-    },
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => {},
   },
-  computed: {
-    collectionTitle() {
-      return this.$store.getters['contents/collectionTitle'];
-    },
-    manifestTitle() {
-      return this.$store.getters['contents/manifest']?.label;
-    },
-  },
-  created() {
-    this.arrowIcon = biChevronRight;
-  },
-};
+});
+
+const store = useStore();
+const arrowIcon = biChevronRight;
+
+const collectionTitle = computed(() => store.getters['contents/collectionTitle']);
+const manifestTitle = computed(() => store.getters['contents/manifest']?.label);
 </script>
diff --git a/src/components/header/Tools.vue b/src/components/header/Tools.vue
index 6f966228..068e07c0 100644
--- a/src/components/header/Tools.vue
+++ b/src/components/header/Tools.vue
@@ -12,28 +12,22 @@
   </div>
 </template>
 
-<script>
-import { biMoonFill, biSunFill } from '@quasar/extras/bootstrap-icons';
+<script setup>
 import Language from '@/components/header/Language.vue';
 import SoftwareInfo from '@/components/header/SoftwareInfo.vue';
 
-export default {
-  name: 'Tools',
-  components: {
-    Language,
-    SoftwareInfo,
-  },
-  computed: {
-    config() {
-      return this.$store.getters['config/config'];
-    },
-    showLanguageSwitch() {
-      return this.config.header?.languageSwitch !== undefined ? this.config.header?.languageSwitch : true;
-    },
-  },
-  created() {
-    this.darkIcon = biMoonFill;
-    this.lightIcon = biSunFill;
-  },
-};
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import { biMoonFill, biSunFill } from '@quasar/extras/bootstrap-icons';
+
+const store = useStore();
+const darkIcon = biMoonFill;
+const lightIcon = biSunFill;
+
+const config = computed(() => store.getters['config/config']);
+const showLanguageSwitch = computed(() => (
+  config.value?.header?.languageSwitch !== undefined
+    ? config.value.header.languageSwitch
+    : true
+));
 </script>
diff --git a/src/components/metadata/Actor.vue b/src/components/metadata/Actor.vue
index 09fcf219..5cc430d3 100644
--- a/src/components/metadata/Actor.vue
+++ b/src/components/metadata/Actor.vue
@@ -7,28 +7,23 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import MetadataValue from '@/components/metadata/MetadataValue.vue';
 
-export default {
-  name: 'Actor',
-  components: { MetadataValue },
-  props: {
-    data: {
-      type: Array,
-      default: () => [],
-    },
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
   },
-  methods: {
-    getRole(actorItem) {
-      const { role } = actorItem;
-      if (!role) return 'undefined_role';
-      if (!Array.isArray(role)) return role;
-      if (role.length > 0) return role[0];
-      return 'undefined_role';
-    },
-  },
-};
+});
+
+function getRole(actorItem) {
+  const { role } = actorItem;
+  if (!role) return 'undefined_role';
+  if (!Array.isArray(role)) return role;
+  if (role.length > 0) return role[0];
+  return 'undefined_role';
+}
 </script>
 
 <style scoped>
diff --git a/src/components/metadata/CollectionMetadata.vue b/src/components/metadata/CollectionMetadata.vue
index d0466295..9244af8a 100644
--- a/src/components/metadata/CollectionMetadata.vue
+++ b/src/components/metadata/CollectionMetadata.vue
@@ -14,43 +14,38 @@
   </q-list>
 </template>
 
-<script>
+<script setup>
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 
-export default {
-  name: 'CollectionMetadata',
-  components: {
-    MetadataItem,
-  },
-  computed: {
-    collection() {
-      return this.$store.getters['contents/collection'];
-    },
-    metadata() {
-      if (!this.collection) return [];
-
-      const mappings = {
-        main: 'title',
-        sub: 'subtitle',
-      };
-
-      const collectorName = this.collection?.collector?.name;
-      const description = this.collection?.description;
-
-      return [
-        ...this.collection.title
-          .filter((collection) => collection)
-          .map((collectionTitle) => ({
-            key: mappings[collectionTitle.type] || 'title',
-            value: collectionTitle.title,
-          })),
-        ...(collectorName ? [{ key: 'collector', value: collectorName }] : []),
-        ...(description ? [{ key: 'description', value: description }] : []),
-        ...(this.collection.metadata || []),
-      ];
-    },
-  },
-};
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+const collection = computed(() => store.getters['contents/collection']);
+const metadata = computed(() => {
+  if (!collection.value) return [];
+
+  const mappings = {
+    main: 'title',
+    sub: 'subtitle',
+  };
+
+  const collectorName = collection.value.collector?.name;
+  const description = collection.value.description;
+
+  return [
+    ...collection.value.title
+      .filter((collection) => collection)
+      .map((collectionTitle) => ({
+        key: mappings[collectionTitle.type] || 'title',
+        value: collectionTitle.title,
+      })),
+    ...(collectorName ? [{ key: 'collector', value: collectorName }] : []),
+    ...(description ? [{ key: 'description', value: description }] : []),
+    ...(collection.value.metadata || []),
+  ];
+});
 </script>
 
 <style scoped>
diff --git a/src/components/metadata/ItemMetadata.vue b/src/components/metadata/ItemMetadata.vue
index cfd3e4bd..7c5c0209 100644
--- a/src/components/metadata/ItemMetadata.vue
+++ b/src/components/metadata/ItemMetadata.vue
@@ -14,46 +14,29 @@
   </q-list>
 </template>
 
-<script>
+<script setup>
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 
-export default {
-  name: 'ItemMetadata',
-  components: {
-    MetadataItem,
-  },
-  computed: {
-    item() {
-      return this.$store.getters['contents/item'];
-    },
-    itemUrl() {
-      return this.$store.getters['contents/itemUrl'];
-    },
-    manifest() {
-      return this.$store.getters['contents/manifest'];
-    },
-    itemsCount() {
-      return this.manifest?.sequence.length;
-    },
-    labels() {
-      return this.$store.getters['config/config'].labels;
-    },
-    number() {
-      return this.manifest ? this.manifest.sequence.findIndex(({ id }) => id === this.itemUrl) + 1 : 1;
-    },
-    total() {
-      return this.itemsCount ?? 1;
-    },
-    metadata() {
-      return [
-        { key: 'label', value: this.item.n },
-        { key: 'language', value: this.item.lang?.join(',') },
-        { key: 'image_license', value: this.item.image?.license?.id },
-        { key: 'image_notes', value: this.item.image?.license?.notes },
-      ].filter((item) => item.value);
-    },
-  },
-};
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+const item = computed(() => store.getters['contents/item']);
+const itemUrl = computed(() => store.getters['contents/itemUrl']);
+const manifest = computed(() => store.getters['contents/manifest']);
+const itemsCount = computed(() => manifest.value?.sequence.length);
+const labels = computed(() => store.getters['config/config'].labels);
+const number = computed(() => manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) + 1 : 1);
+const total = computed(() => itemsCount.value ?? 1);
+const metadata = computed(() => (
+  [
+    { key: 'label', value: item.value.n },
+    { key: 'language', value: item.value?.lang?.join(',') },
+    { key: 'image_license', value: item.value?.image?.license?.id },
+    { key: 'image_notes', value: item.value?.image?.license?.notes },
+  ].filter((item) => item.value)
+));
 </script>
 
 <style scoped>
diff --git a/src/components/metadata/ManifestMetadata.vue b/src/components/metadata/ManifestMetadata.vue
index e071a60c..0538d63a 100644
--- a/src/components/metadata/ManifestMetadata.vue
+++ b/src/components/metadata/ManifestMetadata.vue
@@ -18,51 +18,33 @@
   </q-list>
 </template>
 
-<script>
+<script setup>
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 import Actor from '@/components/metadata/Actor.vue';
 
-export default {
-  name: 'ManifestMetadata',
-  components: {
-    MetadataItem,
-    Actor,
-  },
-  computed: {
-    manifest() {
-      return this.$store.getters['contents/manifest'];
-    },
-    manifests() {
-      return this.$store.getters['contents/manifests'];
-    },
-    manifestHasItems() {
-      return this.manifest?.sequence.length > 0;
-    },
-    number() {
-      return this.manifests !== null ? this.manifests.findIndex(({ id }) => id === this.manifest.id) + 1 : 1;
-    },
-    total() {
-      return this.manifests !== null ? this.manifests.length : 1;
-    },
-    labels() {
-      return this.$store.getters['config/config'].labels;
-    },
-    metadata() {
-      if (!this.manifest) return [];
-      return [
-        { key: 'label', value: this.manifest.label },
-        ...(this.manifest.license || []).map((manifest) => ({
-          key: 'License',
-          value: manifest.id,
-        })),
-        ...(this.manifest.metadata || []),
-      ];
-    },
-    actor() {
-      return this.manifest?.actor;
-    },
-  },
-};
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+const manifest = computed(() => store.getters['contents/manifest'] );
+const manifests = computed(() => store.getters['contents/manifests']);
+const manifestHasItems = computed(() => manifest.value?.sequence.length > 0);
+const number = computed(() => manifests.value !== null ? manifests.value.findIndex(({ id }) => id === manifest.value.id) + 1 : 1);
+const total = computed(() => manifests.value !== null ? manifests.value.length : 1);
+const labels = computed(() => store.getters['config/config'].labels);
+const metadata = computed(() => {
+  if (!manifest.value) return [];
+  return [
+    { key: 'label', value: manifest.value.label },
+    ...(manifest.value.license || []).map((manifest) => ({
+      key: 'License',
+      value: manifest.id,
+    })),
+    ...(manifest.value.metadata || []),
+  ];
+});
+const actor = computed(() => manifest.value?.actor );
 </script>
 
 <style scoped>
diff --git a/src/components/metadata/MetadataItem.vue b/src/components/metadata/MetadataItem.vue
index 65a2a843..4de125a4 100644
--- a/src/components/metadata/MetadataItem.vue
+++ b/src/components/metadata/MetadataItem.vue
@@ -9,33 +9,25 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import MetadataLink from '@/components/metadata/MetadataLink.vue';
 import MetadataValue from '@/components/metadata/MetadataValue.vue';
 
-export default {
-  name: 'MetadataItem',
-  components: { MetadataValue, MetadataLink },
-  props: {
-    item: Object,
-  },
-  computed: {
-    label() {
-      return this.item?.key || 'other';
-    },
-    childItems() {
-      return this.item?.metadata || [];
-    },
-  },
-  methods: {
-    isLink() {
-      const regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
-      const matches = this.item?.key?.match(regex) || null;
-
-      return matches !== null;
-    },
-  },
-};
+import { computed } from 'vue';
+
+const props = defineProps({
+  item: Object,
+});
+
+const label = computed(() => props.item?.key || 'other');
+const childItems = computed(() => props.item?.metadata || []);
+
+function isLink() {
+  const regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
+  const matches = props.item?.key?.match(regex) || null;
+
+  return matches !== null;
+}
 </script>
 
 <style scoped>
diff --git a/src/components/metadata/MetadataLink.vue b/src/components/metadata/MetadataLink.vue
index b23ba2df..d7cbc602 100644
--- a/src/components/metadata/MetadataLink.vue
+++ b/src/components/metadata/MetadataLink.vue
@@ -17,25 +17,21 @@
   </a>
 </template>
 
-<script>
+<script setup>
 import { biBoxArrowUpRight } from '@quasar/extras/bootstrap-icons';
 
-export default {
-  name: 'MetadataLink',
-  props: {
-    url: {
-      type: String,
-      default: () => '',
-    },
-    text: {
-      type: String,
-      default: () => '',
-    },
+const props = defineProps({
+  url: {
+    type: String,
+    default: () => '',
   },
-  created() {
-    this.icon = biBoxArrowUpRight;
+  text: {
+    type: String,
+    default: () => '',
   },
-};
+});
+
+const icon = biBoxArrowUpRight;
 </script>
 
 <style scoped>
diff --git a/src/components/metadata/MetadataValue.vue b/src/components/metadata/MetadataValue.vue
index 5c27627c..5b0bedea 100644
--- a/src/components/metadata/MetadataValue.vue
+++ b/src/components/metadata/MetadataValue.vue
@@ -4,68 +4,13 @@
   </div>
 </template>
 
-<script>
-import { biBoxArrowUpRight } from '@quasar/extras/bootstrap-icons';
-
-export default {
-  name: 'MetadataValue',
-  props: {
-    value: {
-      type: String,
-      default: () => '',
-    },
-  },
-  computed: {
-    contentUrls() {
-      let { value } = this;
-      const regex = /\(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]\)/ig;
-      const urls = [...(value.match(regex) || [])];
-
-      urls.forEach((url) => {
-        value = value.replace(url, `_-_${url}_-_`);
-      });
-
-      const urlContents = value.split('_-_').filter((url) => url);
-
-      const urlText = urlContents.map((urlContent) => ({
-        text: urlContent,
-        isLink: urls.includes(urlContent),
-      }));
-
-      if (urls.length) {
-        const filteredOutput = [];
-        let i = 0;
-
-        while (i < urlText.length) {
-          const element = urlText[i];
-
-          // This first if condition logic checks the string that we get from backend.
-          // Ex text: Max Mustermann (https://d-nb.info/gnd/1143543866).
-          // Here the text is divided into 3 parts of array which takes text from previous element(Max Mustermann ( ),
-          // link from next element(https://d-nb.info/gnd/1143543866) and than the last ) is skipped.
-          if ((urlText[i - 1]?.text || '').endsWith('(') && (urlText[i + 1]?.text || '').endsWith(')') && element.isLink) {
-            filteredOutput.push({ isLink: true, linkTitle: urlText[i - 1]?.text.replace(')', '').replace(' (', ''), text: element.text });
-
-            i += 1;
-          } else if (element.isLink || !(urlText[i + 1]?.isLink && element.text.endsWith('('))) {
-          // it checks if it's a normal link or current text ends with ( and next item is link.
-            const linkTitle = element.text.split('/').filter((link) => link);
-
-            filteredOutput.push({ ...element, linkTitle: linkTitle[linkTitle.length - 1] });
-          }
-          i += 1;
-        }
-
-        return filteredOutput;
-      }
-
-      return urlText;
-    },
-  },
-  created() {
-    this.linkIcon = biBoxArrowUpRight;
+<script setup>
+const props = defineProps({
+  value: {
+    type: String,
+    default: () => '',
   },
-};
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/metadata/MetadataView.vue b/src/components/metadata/MetadataView.vue
index 1c828378..667ffad0 100644
--- a/src/components/metadata/MetadataView.vue
+++ b/src/components/metadata/MetadataView.vue
@@ -6,27 +6,21 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import CollectionMetadata from '@/components/metadata/CollectionMetadata.vue';
 import ManifestMetadata from '@/components/metadata/ManifestMetadata.vue';
 import ItemMetadata from '@/components/metadata/ItemMetadata.vue';
 
-export default {
-  name: 'MetadataView',
-  props: {
-    options: Object,
-  },
-  components: {
-    ItemMetadata,
-    ManifestMetadata,
-    CollectionMetadata,
-  },
-  computed: {
-    config() {
-      return this.$store.getters['config/config'];
-    },
-  },
-};
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const props = defineProps({
+  options: Object,
+});
+
+const store = useStore();
+
+const config = computed(() => store.getters['config/config'] );
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/panels/Panel.vue b/src/components/panels/Panel.vue
index c5a61043..01535c02 100644
--- a/src/components/panels/Panel.vue
+++ b/src/components/panels/Panel.vue
@@ -60,20 +60,26 @@ import PanelToggleAction from '@/components/panels/actions/PanelToggleAction.vue
 import PanelImageAction from '@/components/panels/actions/PanelImageAction.vue';
 import Loading from '@/components/Loading.vue';
 import Notification from '@/components/Notification.vue';
-import { findComponent } from '@/utils/panels';
 
+import { computed, nextTick, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { findComponent } from '@/utils/panels'
+
+// NOTE: Using `setup()` rather than the recommended `<script setup>`
+// to avoid issues with asset loading.
 export default {
   components: {
-    TreeView,
     AnnotationsView,
     ContentView,
-    MetadataView,
     ImageView,
-    PanelZoomAction,
-    PanelToggleAction,
-    PanelImageAction,
-    Notification,
     Loading,
+    MetadataView,
+    Notification,
+    PanelImageAction,
+    PanelToggleAction,
+    PanelZoomAction,
+    TreeView,
   },
   props: {
     panel: {
@@ -82,56 +88,77 @@ export default {
     },
     activeView: Number,
   },
-  data() {
-    return {
-      tabs: [],
-      activeTabIndex: 0,
-      unsubscribe: null,
-      isLoading: false,
-    };
-  },
-  computed: {
-    item() {
-      return this.$store.getters['contents/item'];
-    },
-  },
-  methods: {
-    getContentUrl(type) {
-      let contentItem = null;
-      if (!type) {
-        [contentItem] = this.item.content;
-        // TODO: this should be moved to loading time in order dynamically recognize all content types
-        //  instead of only the first one
-        this.$store.dispatch('config/setContentType', contentItem.type.split('type=')[1]);
-      }
+  setup(props, { emit }) {
+    const store = useStore();
+    const { t } = useI18n();
 
-      contentItem = this.item.content.find((c) => c.type.split('type=')[1] === type);
+    const tabs = ref([]);
+    const activeTabIndex = ref(0);
+    const unsubscribe = ref(null);
+    const isLoading = ref(false);
 
-      return contentItem ? contentItem.url : null;
-    },
-    init(views) {
-      this.tabs = [];
-      if (this.unsubscribe !== null) this.unsubscribe();
+    const item = computed(() => store.getters['contents/item']);
+
+    watch(
+      () => props.activeView,
+      (value) => {
+        activeTabIndex.value = value;
+      },
+      { immediate: true },
+    );
+
+    watch(
+      () => props.panel,
+      ({ views }) => {
+        nextTick(() => {
+          init(views);
+        })
+      },
+      { deep: true, immediate: true },
+    );
+    watch(
+      item,
+      () => {
+        init(props.panel.views);
+      }
+    )
+
+    function init(views) {
+      tabs.value = [];
+      if (unsubscribe.value !== null) unsubscribe.value();
 
       views.forEach((view, i) => {
         const { component } = findComponent(view.connector.id);
-        let methodName = `create${component}`;
-        if (!this[methodName]) methodName = 'createDefaultView';
-        this[methodName](view, i);
+
+        switch (component) {
+          case 'ContentView':
+            return createContentView(view, i);
+          case 'TreeView':
+            return createTreeView(view, i);
+          case 'MetadataView':
+            return createMetadataView(view, i);
+          case 'ImageView':
+            return createImageView(view, i);
+          case 'AnnotationsView':
+            return createAnnotationsView(view, i);
+          default:
+            return createDefaultView(view, i);
+        }
       });
-    },
-    createContentView(view, i) {
+    }
+
+    function createContentView(view, i) {
       const { connector, label } = view;
       const { component } = findComponent(connector.id);
 
       const type = connector.options?.type;
-      const url = this.getContentUrl(type);
+      const url = getContentUrl(type);
       if (!url) return;
 
       const fontSize = 16;
       const actionEvents = {
         update: (value) => {
-          this.tabs[i].props.fontSize = value;
+          tabs.value[i].props.fontSize = value;
         },
       };
 
@@ -143,18 +170,19 @@ export default {
         events: actionEvents,
       }];
 
-      this.tabs = [...this.tabs, {
+      tabs.value = [...tabs.value, {
         component,
         label,
         props: { type, url, fontSize },
         actions,
       }];
-    },
-    createAnnotationsView(view, i) {
+    }
+
+    function createAnnotationsView(view, i) {
       const { connector, label } = view;
       const { component } = findComponent(connector.id);
 
-      const url = this.item.annotationCollection;
+      const url = item.value?.annotationCollection;
 
       if (!url) return;
 
@@ -162,18 +190,23 @@ export default {
       const events = {
         update: (value) => {
           if (value === 'maybe') return;
-          this.$store.dispatch(value ? 'annotations/selectAll' : 'annotations/selectNone');
+          store.dispatch(value ? 'annotations/selectAll' : 'annotations/selectNone');
         },
       };
 
-      this.unsubscribe = this.$store.subscribeAction(async ({ type, payload }) => {
-        if (this.tabs.length && this.tabs[0].actions?.length && type === 'annotations/setActiveAnnotations') {
+      unsubscribe.value = store.subscribeAction(async ({ type, payload }) => {
+        if (tabs.value.length
+          && tabs.value[0]?.actions?.length
+          && type === 'annotations/setActiveAnnotations'
+        ) {
           const activeAmount = Object.keys(payload).length;
-          const filteredAmount = this.$store.getters['annotations/filteredAnnotations'].length;
+          const filteredAmount = store.getters['annotations/filteredAnnotations'].length;
 
           let newSelected = activeAmount > 0 && activeAmount === filteredAmount;
           if (!newSelected && Object.keys(payload).length > 0) newSelected = 'maybe';
-          if (this.tabs[i].actions[0].props.selected !== newSelected) this.tabs[i].actions[0].props.selected = newSelected;
+          if (tabs.value[i].actions[0].props.selected !== newSelected) {
+            tabs.value[i].actions[0].props.selected = newSelected;
+          }
         }
       });
 
@@ -181,35 +214,38 @@ export default {
         component: 'PanelToggleAction',
         props: {
           selected,
-          label: this.$t('select_all'),
+          label: t('select_all'),
         },
         events,
       }];
 
-      this.tabs = [...this.tabs, {
+      tabs.value = [...tabs.value, {
         component,
         label,
         props: { url, ...connector.options },
         actions,
       }];
-    },
-    createMetadataView(view) {
+    }
+
+    function createMetadataView(view) {
       const { connector, label } = view;
       const { component } = findComponent(connector.id);
       const { options } = connector;
-      this.tabs = [...this.tabs, {
+      tabs.value = [...tabs.value, {
         component,
         label,
         props: { options },
       }];
-    },
-    createTreeView(view) {
-      this.createDefaultView(view);
-    },
-    createImageView(view) {
+    }
+
+    function createTreeView(view) {
+      createDefaultView(view);
+    }
+
+    function createImageView(view) {
       const { connector, label } = view;
       const { component } = findComponent(connector.id);
-      this.tabs = [...this.tabs, {
+      tabs.value = [...tabs.value, {
         component,
         label,
         props: { ...connector.options },
@@ -217,42 +253,45 @@ export default {
           component: 'PanelImageAction',
         }],
       }];
-    },
-    createDefaultView(view) {
+    }
+
+    function createDefaultView(view) {
       const { connector, label } = view;
       const { component } = findComponent(connector.id);
-      this.tabs = [...this.tabs, {
+      tabs.value = [...tabs.value, {
         component,
         label,
         props: { ...connector.options },
       }];
-    },
+    }
 
-    onViewChange() {
-      this.$emit('active-view', this.activeTabIndex);
-    },
-  },
-  watch: {
-    panel: {
-      handler({ views }) {
-        this.init(views);
-      },
-      deep: true,
-      immediate: true,
-    },
-    activeView: {
-      handler(value) {
-        this.activeTabIndex = value;
-      },
-      immediate: true,
-    },
-    item: {
-      handler() {
-        this.init(this.panel.views);
-      },
-    },
+    function getContentUrl(type) {
+      let contentItem = null;
+      if (!type) {
+        [contentItem] = item.value.content;
+        // TODO: this should be moved to loading time in order dynamically recognize all content types
+        //  instead of only the first one
+        store.dispatch('config/setContentType', contentItem.type.split('type=')[1]);
+      }
+
+      contentItem = item.value.content.find((c) => c.type.split('type=')[1] === type);
+
+      return contentItem ? contentItem.url : null;
+    }
+
+    function onViewChange() {
+      emit('active-view', activeTabIndex.value);
+    }
+
+    return {
+      activeTabIndex,
+      isLoading,
+      panel: props.panel,
+      tabs,
+      onViewChange,
+    }
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/panels/PanelsWrapper.vue b/src/components/panels/PanelsWrapper.vue
index 7e62f0a4..661f41e2 100644
--- a/src/components/panels/PanelsWrapper.vue
+++ b/src/components/panels/PanelsWrapper.vue
@@ -6,35 +6,28 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import Panel from '@/components/panels/Panel.vue';
 
-export default {
-  name: 'PanelsWrapper',
-  components: {
-    Panel,
-  },
-  computed: {
-    panels() {
-      const { panels } = this.config;
-      return panels;
-    },
-    config() {
-      return this.$store.getters['config/config'];
-    },
-    activeViews() {
-      return this.$store.getters['config/activeViews'];
-    },
-  },
-  methods: {
-    onActiveViewChange(viewIndex, panelIndex) {
-      this.$store.dispatch('config/setActivePanelView', { viewIndex, panelIndex });
-    },
-    getActiveView(panelIndex) {
-      return this.activeViews[panelIndex];
-    },
-  },
-};
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+const panels = computed(() => {
+  const { panels } = config.value;
+  return panels;
+});
+const config = computed(() => store.getters['config/config']);
+const activeViews = computed(() => store.getters['config/activeViews']);
+
+function onActiveViewChange(viewIndex, panelIndex) {
+  store.dispatch('config/setActivePanelView', { viewIndex, panelIndex });
+}
+
+function getActiveView(panelIndex) {
+  return activeViews.value[panelIndex];
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/panels/actions/PanelImageAction.vue b/src/components/panels/actions/PanelImageAction.vue
index 701be452..dfccc5b3 100644
--- a/src/components/panels/actions/PanelImageAction.vue
+++ b/src/components/panels/actions/PanelImageAction.vue
@@ -15,24 +15,21 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue';
 import {
-  biZoomIn, biZoomOut, biFullscreen, biArrowsFullscreen,
+  biZoomIn,
+  biZoomOut,
+  biFullscreen,
+  biArrowsFullscreen,
 } from '@quasar/extras/bootstrap-icons';
 
-export default {
-  name: 'PanelImageAction',
-  data() {
-    return {
-      buttons: [
-        { id: 'zoom-in', icon: biZoomIn, tooltip: 'zoom_in' },
-        { id: 'zoom-out', icon: biZoomOut, tooltip: 'zoom_out' },
-        { id: 'fullscreen', icon: biFullscreen, tooltip: 'switch_to_fullscreen' },
-        { id: 'default', icon: biArrowsFullscreen, tooltip: 'reset_view' },
-      ],
-    };
-  },
-};
+const buttons = computed(() => ([
+  { id: 'zoom-in', icon: biZoomIn, tooltip: 'zoom_in' },
+  { id: 'zoom-out', icon: biZoomOut, tooltip: 'zoom_out' },
+  { id: 'fullscreen', icon: biFullscreen, tooltip: 'switch_to_fullscreen' },
+  { id: 'default', icon: biArrowsFullscreen, tooltip: 'reset_view' },
+]));
 </script>
 
 <style scoped>
diff --git a/src/components/panels/actions/PanelToggleAction.vue b/src/components/panels/actions/PanelToggleAction.vue
index 4bd61508..c1181993 100644
--- a/src/components/panels/actions/PanelToggleAction.vue
+++ b/src/components/panels/actions/PanelToggleAction.vue
@@ -4,28 +4,33 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PanelToggleAction',
-  props: {
-    selected: Boolean,
-    label: String,
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  selected: Boolean,
+  label: String,
+})
+const emit = defineEmits(['update']);
+
+const selectedModel = ref(false);
+
+watch(
+  () => props.selected,
+  (value) => {
+    selectedModel.value = value;
   },
-  data: () => ({
-    selectedModel: false,
-  }),
-  watch: {
-    selected: {
-      handler(value) {
-        this.selectedModel = value;
-      },
-      immediate: true,
-    },
-    selectedModel(value, oldValue) {
-      if (value !== oldValue) this.$emit('update', value);
-    },
+  { immediate: true },
+);
+
+watch(
+  selectedModel,
+  (value, oldValue) => {
+    if (value !== oldValue) {
+      emit('update', value);
+    }
   },
-};
+);
 </script>
 
 <style scoped>
diff --git a/src/components/panels/actions/PanelZoomAction.vue b/src/components/panels/actions/PanelZoomAction.vue
index 66ef53fb..5a3a4472 100644
--- a/src/components/panels/actions/PanelZoomAction.vue
+++ b/src/components/panels/actions/PanelZoomAction.vue
@@ -26,54 +26,52 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from 'vue';
 import { biZoomIn, biZoomOut } from '@quasar/extras/bootstrap-icons';
 
-export default {
-  name: 'PanelZoomAction',
-  data: () => ({
-    disableIncrease: false,
-    disableDecrease: false,
-    value: 0,
-  }),
-  props: {
-    min: Number,
-    max: Number,
-    step: Number,
-    startValue: Number,
-  },
-  created() {
-    this.zoomInIcon = biZoomIn;
-    this.zoomOutIcon = biZoomOut;
-  },
-  mounted() {
-    this.value = this.startValue;
-  },
-  methods: {
-    increase() {
-      this.value += this.step;
-      this.$emit('update', this.value);
+const props = defineProps({
+  min: Number,
+  max: Number,
+  step: Number,
+  startValue: Number,
+});
+const emit = defineEmits(['update']);
 
-      if (this.value >= this.max) {
-        this.disableIncrease = true;
-      } else {
-        this.disableIncrease = false;
-        this.disableDecrease = false;
-      }
-    },
-    decrease() {
-      this.value -= this.step;
-      this.$emit('update', this.value);
+const zoomInIcon = biZoomIn;
+const zoomOutIcon = biZoomOut;
 
-      if (this.value <= this.min) {
-        this.disableDecrease = true;
-      } else {
-        this.disableIncrease = false;
-        this.disableDecrease = false;
-      }
-    },
-  },
-};
+const disableIncrease = ref(false);
+const disableDecrease = ref(false);
+const value = ref(0);
+
+onMounted(() => {
+  value.value = props.startValue;  
+});
+
+function increase() {
+  value.value += props.step;
+  emit('update', value.value);
+
+  if (value.value >= props.max) {
+    disableIncrease.value = true;
+  } else {
+    disableIncrease.value = false;
+    disableDecrease.value = false;
+  }
+}
+
+function decrease() {
+  value.value -= props.step;
+  emit('update', value.value);
+
+  if (value.value <= props.min) {
+    disableDecrease.value = true;
+  } else {
+    disableIncrease.value = false;
+    disableDecrease.value = false;
+  }
+}
 </script>
 
 <style scoped>
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 27240d82..8440627f 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -9,6 +9,7 @@ const messages = {
 
 // Create I18n instance
 export const i18n = createI18n({
+  legacy: false,
   locale: 'en',
   fallbackLocale: 'en',
   messages,
diff --git a/src/main.js b/src/main.js
index d4579971..c7d61c7d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,18 +10,12 @@ import './css/style.scss';
 window.Tido = function Tido(config = {}) {
   this.config = { ...config };
 
-  const instance = this;
   this.app = createApp({
-    render() {
-      return h(App);
-    },
-
-    data() {
-      return {
-        config: instance.config,
-      };
+    setup() {
+      return () => h(App);
     },
   });
+  this.app.provide('config', this.config);
 
   this.app.use(createStore());
   this.app.use(i18n);