feat: Migrate to Nuxt 3 framework (#5184)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/components/global/AppButtonCopy.vue

@@ -2,32 +2,33 @@
   <v-tooltip
     ref="copyToolTip"
     v-model="show"
-    :color="copied? 'success lighten-1' : 'red lighten-1'"
+    :color="copied? 'success-lighten-1' : 'red-lighten-1'"
     top
     :open-on-hover="false"
     :open-on-click="true"
     close-delay="500"
     transition="slide-y-transition"
   >
-    <template #activator="{ on }">
+    <template #activator="{ props }">
       <v-btn
+        variant="flat"
         :icon="icon"
         :color="color"
         retain-focus-on-click
         :class="btnClass"
         :disabled="copyText !== '' ? false : true"
-        @click="
-          on.click;
-          textToClipboard();
-        "
-        @blur="on.blur"
+        v-bind="props"
+        @click="textToClipboard()"
       >
         <v-icon>{{ $globals.icons.contentCopy }}</v-icon>
         {{ icon ? "" : $t("general.copy") }}
       </v-btn>
     </template>
     <span>
-      <v-icon left dark>
+      <v-icon
+        start
+        dark
+      >
         {{ $globals.icons.clipboardCheck }}
       </v-icon>
       <slot v-if="!isSupported"> {{ $t("general.your-browser-does-not-support-clipboard") }} </slot>
@@ -37,11 +38,9 @@
 </template>
 
 <script lang="ts">
-import { useClipboard } from "@vueuse/core"
-import { defineComponent, ref } from "@nuxtjs/composition-api";
-import { VTooltip } from "~/types/vuetify";
+import { useClipboard } from "@vueuse/core";
 
-export default defineComponent({
+export default defineNuxtComponent({
   props: {
     copyText: {
       type: String,
@@ -61,7 +60,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { copy, copied, isSupported } = useClipboard()
+    const { copy, copied, isSupported } = useClipboard();
     const show = ref(false);
     const copyToolTip = ref<VTooltip | null>(null);
 
@@ -73,7 +72,7 @@ export default defineComponent({
       if (isSupported.value) {
         await copy(props.copyText);
         if (copied.value) {
-          console.log(`Copied\n${props.copyText}`)
+          console.log(`Copied\n${props.copyText}`);
         }
         else {
           console.warn("Copy failed: ", copied.value);