chore: upgrade to Vue3/Vuetify3

components/pages/filters/List/index.vue

@@ -1,43 +0,0 @@
-<template>
-  <v-card flat outlined class="mx-3 my-3 rounded-xl">
-    <v-card-title>
-      <span v-text="$tc(title, model.length)" />
-    </v-card-title>
-    <v-list>
-      <v-list-item v-for="item in model" :key="item">
-        <v-list-item-action @click="toggleIgnore(type, item)">
-          <v-tooltip top>
-            <template #activator="{ on }">
-              <v-icon v-on="on">
-                mdi-delete-outline
-              </v-icon>
-            </template>
-            <span v-text="$t('filters.remove')" />
-          </v-tooltip>
-        </v-list-item-action>
-        <v-list-item-title><span v-text="item" /></v-list-item-title>
-      </v-list-item>
-    </v-list>
-  </v-card>
-</template>
-
-<script setup lang='ts'>
-defineProps({
-  model: {
-    type: Array,
-    required: true
-  },
-  title: {
-    type: String,
-    required: true
-  },
-  type: {
-    type: String,
-    required: true
-  },
-  toggleIgnore: {
-    type: Function,
-    required: true
-  }
-})
-</script>

components/pages/filters/filter-list.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-card flat variant="outlined" rounded="xl" class="mx-3 my-3">
+    <v-card-title>
+      <span v-text="$t(title, model.length)" />
+    </v-card-title>
+    <v-list>
+      <v-list-item v-for="item in model" :key="item" :title="item">
+        <template #prepend>
+          <v-list-item-action @click="toggleIgnore(type, item)">
+            <v-tooltip top>
+              <template #activator="{ props }">
+                <v-icon v-bind="props">
+                  mdi-delete-outline
+                </v-icon>
+              </template>
+              <span v-text="$t('filters.remove')" />
+            </v-tooltip>
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script setup lang='ts'>
+defineProps({
+  model: {
+    type: Array,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  toggleIgnore: {
+    type: Function,
+    required: true,
+  },
+})
+</script>

components/pages/filters/filter-page.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :key="isAuthenticated">
+  <div :key="isAuthenticated ? 'true' : 'false'">
     <v-container fluid grid-list-md class="app-fade-in">
       <v-row wrap>
         <v-col cols="12">
@@ -62,23 +62,23 @@
 
 <script setup lang='ts'>
 import { computed, ref } from 'vue'
-import List from './List/index.vue'
-import { useAuth } from '~/plugins/auth'
-import { useTranslation } from '~/plugins/i18n'
+import { useAuth0 } from '@auth0/auth0-vue'
+import { useI18n } from '#i18n'
+import List from './filter-list.vue'
 import {
   useFetchFiltersQuery,
   useToggleIgnoreBandMutation,
   useToggleIgnoreCityMutation,
   useToggleIgnoreDanceHallMutation,
   useToggleIgnoreMunicipalityMutation,
-  useToggleIgnoreStateMutation
+  useToggleIgnoreStateMutation,
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
 const state = useState()
-const { t } = useTranslation()
+const { t } = useI18n()
 state.setTitle(t('app.links.filters'))
-const { isAuthenticated } = useAuth()
+const { isAuthenticated } = useAuth0()
 const { result, refetch } = useFetchFiltersQuery()
 const bands = computed(() => result.value?.bands ?? [])
 const cities = computed(() => result.value?.cities ?? [])