feat: migrate to vue 3 (#2689)

---------

Co-authored-by: Joep <jcbuhre@gmail.com>
Co-authored-by: Omar Hussein <omarmohammad1951@gmail.com>
Co-authored-by: Oleg Lobanov <oleg@lobanov.me>

frontend/src/components/prompts/Download.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="card floating" id="download">
     <div class="card-title">
-      <h2>{{ $t("prompts.download") }}</h2>
+      <h2>{{ t("prompts.download") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t("prompts.downloadMessage") }}</p>
+      <p>{{ t("prompts.downloadMessage") }}</p>
 
       <button
+        id="focus-prompt"
         v-for="(ext, format) in formats"
         :key="format"
         class="button button--block"
-        @click="currentPrompt.confirm(format)"
-        v-focus
+        @click="layoutStore.currentPrompt?.confirm(format)"
       >
         {{ ext }}
       </button>
@@ -20,26 +20,21 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useLayoutStore } from "@/stores/layout";
 
-export default {
-  name: "download",
-  data: function () {
-    return {
-      formats: {
-        zip: "zip",
-        tar: "tar",
-        targz: "tar.gz",
-        tarbz2: "tar.bz2",
-        tarxz: "tar.xz",
-        tarlz4: "tar.lz4",
-        tarsz: "tar.sz",
-      },
-    };
-  },
-  computed: {
-    ...mapGetters(["currentPrompt"]),
-  },
+const layoutStore = useLayoutStore();
+
+const { t } = useI18n();
+
+const formats = {
+  zip: "zip",
+  tar: "tar",
+  targz: "tar.gz",
+  tarbz2: "tar.bz2",
+  tarxz: "tar.xz",
+  tarlz4: "tar.lz4",
+  tarsz: "tar.sz",
 };
 </script>