chore: upgrade to Vue3/Vuetify3

components/pages/origins/origin-page.vue

@@ -2,17 +2,18 @@
   <div :key="isAuthenticated ? 'true' : 'false'">
     <v-container fluid grid-list-md class="app-fade-in">
       <v-layout row wrap>
-        <v-flex xs12>
+        <v-col xs="12">
           <v-text-field
             v-model="origin"
+            variant="underlined"
             :label="$t('origins.origin')"
             :placeholder="$t('origins.geolocation')"
           >
-            <template #append-outer>
+            <template #append>
               <v-tooltip top>
-                <template #activator="{ on }">
+                <template #activator="{ props }">
                   <v-icon
-                    v-on="on"
+                    v-bind="props"
                     @click="fetchAddressFn()"
                   >
                     mdi-crosshairs-gps
@@ -23,10 +24,10 @@
             </template>
             <template #prepend>
               <v-tooltip top>
-                <template #activator="{ on }">
+                <template #activator="{ props }">
                   <v-icon
                     :disabled="!origin"
-                    v-on="on"
+                    v-bind="props"
                     @click="saveOriginFn(origin)"
                   >
                     mdi-bookmark-plus-outline
@@ -36,14 +37,14 @@
               </v-tooltip>
             </template>
           </v-text-field>
-        </v-flex>
+        </v-col>
       </v-layout>
       <v-layout v-for="o in origins" :key="o" row wrap>
-        <v-flex xs12>
+        <v-col xs="12">
           <v-tooltip top>
-            <template #activator="{ on }">
+            <template #activator="{ props }">
               <v-icon
-                v-on="on"
+                v-bind="props"
                 @click="removeOriginFn(o)"
               >
                 mdi-delete-outline
@@ -52,7 +53,7 @@
             <span v-text="$t('origins.remove')" />
           </v-tooltip>
           <span>{{ o }}</span>
-        </v-flex>
+        </v-col>
       </v-layout>
     </v-container>
     <v-snackbar
@@ -67,20 +68,20 @@
 
 <script setup lang='ts'>
 import { computed, ref } from 'vue'
-import { useAuth } from '~/plugins/auth'
-import { useTranslation } from '~/plugins/i18n'
+import { useAuth0 } from '@auth0/auth0-vue'
+import { useI18n } from '#i18n'
 import {
   useFetchAddressLazyQuery,
   useFindOriginsQuery,
   useRemoveOriginMutation,
-  useSaveOriginMutation
+  useSaveOriginMutation,
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
 const state = useState()
-const { t } = useTranslation()
+const { t } = useI18n()
 state.setTitle(t('app.links.origins'))
-const { isAuthenticated } = useAuth()
+const { isAuthenticated } = useAuth0()
 const { result, refetch } = useFindOriginsQuery()
 const origins = computed(() => result.value?.origins ?? [])
 const snackbar = ref({ active: false, color: 'success', text: '' })
@@ -93,7 +94,7 @@ const fetchAddressFn = () => {
     window.navigator.geolocation.getCurrentPosition((pos) => {
       load()
       doFetchAddress({
-        latlng: `${pos.coords.latitude},${pos.coords.longitude}`
+        latlng: `${pos.coords.latitude},${pos.coords.longitude}`,
       })?.then((res) => {
         origin.value = res.data.address
       })