chore: migrate to script setup style

components/pages/events/Event/distance.vue

@@ -16,27 +16,19 @@
   </v-layout>
 </template>
 
-<script lang='ts'>
+<script setup lang='ts'>
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import { DanceHallDistance } from '~/graphql/generated/operations'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'DistanceDisplay',
+  distance: {
-  props: {
+    type: Object as PropType<DanceHallDistance>,
-    distance: {
+    required: true
-      type: Object as PropType<DanceHallDistance>,
-      required: true
-    }
-  },
-  setup (props) {
-    const numericDistance = computed(() =>
-      Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-      }))
-    return {
-      numericDistance
-    }
   }
 })
+const numericDistance = computed(() =>
+  Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }))
 </script>

components/pages/events/Event/index.vue

@@ -107,45 +107,35 @@
   </v-card>
 </template>
 
-<script lang='ts'>
+<script setup lang='ts'>
 
 import { format, formatDistanceToNow, parseISO } from 'date-fns'
 
 import { enGB, sv } from 'date-fns/locale'
-import { computed, defineComponent, getCurrentInstance, PropType } from 'vue'
+import { computed, getCurrentInstance, PropType } from 'vue'
 import { Event } from '~/graphql/generated/operations'
 import DistanceDisplay from '~/components/pages/events/Event/distance.vue'
 
-export default defineComponent({
+const props = defineProps({
-  name: 'EventDetail',
+  event: {
-  components: { DistanceDisplay },
+    type: Object as PropType<Event>,
-  props: {
+    required: true
-    event: {
-      type: Object as PropType<Event>,
-      required: true
-    },
-    hasUser: {
-      type: Boolean,
-      required: true
-    },
-    toggleIgnore: {
-      type: Function,
-      required: true
-    }
   },
-  setup (props) {
+  hasUser: {
-    const instance = getCurrentInstance()
+    type: Boolean,
-    const locale = computed(() => (instance?.proxy.$i18n.locale ?? 'sv') === 'en' ? enGB : sv)
+    required: true
-    const time = computed(() => (props.event.time || '').split('-')[0].replace('.', ':'))
+  },
-    const weekday = computed(() => format(parseISO(props.event.date), 'EEEE', { locale: locale.value }))
+  toggleIgnore: {
-    const daysUntil = computed(() => formatDistanceToNow(parseISO(`${props.event.date}T${time.value}`), {
+    type: Function,
-      addSuffix: true,
+    required: true
-      locale: locale.value
-    }))
-    return {
-      weekday,
-      daysUntil
-    }
   }
 })
+const instance = getCurrentInstance()
+const locale = computed(() => (instance?.proxy.$i18n.locale ?? 'sv') === 'en' ? enGB : sv)
+const time = computed(() => (props.event.time || '').split('-')[0].replace('.', ':'))
+const weekday = computed(() => format(parseISO(props.event.date), 'EEEE', { locale: locale.value }))
+const daysUntil = computed(() => formatDistanceToNow(parseISO(`${props.event.date}T${time.value}`), {
+  addSuffix: true,
+  locale: locale.value
+}))
 </script>

components/pages/events/List/index.vue

@@ -2,7 +2,7 @@
   <div>
     <v-row v-for="event in events" :key="event.id" wrap>
       <v-flex xs12>
-        <Event
+        <event-card
           :event="event"
           :has-user="hasUser"
           :toggle-ignore="toggleIgnore"
@@ -12,27 +12,23 @@
   </div>
 </template>
 
-<script>
+<script setup lang='ts'>
-import Event from '../Event'
+import { type PropType } from 'vue'
+import EventCard from '../Event/index.vue'
+import { type Event } from '~/graphql/generated/operations'
 
-export default {
+defineProps({
-  name: 'EventList',
+  hasUser: {
-  components: {
+    type: Boolean,
-    Event
+    required: true
   },
-  props: {
+  toggleIgnore: {
-    hasUser: {
+    type: Function,
-      type: Boolean,
+    required: true
-      required: true
+  },
-    },
+  events: {
-    toggleIgnore: {
+    type: Array as PropType<Event[]>,
-      type: Function,
+    required: true
-      required: true
-    },
-    events: {
-      type: Array,
-      required: true
-    }
   }
-}
+})
 </script>

components/pages/events/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :key="isAuthenticated">
+  <div :key="isAuthenticated ? 'true' : 'false'">
     <v-container :key="range" fluid grid-list-md class="app-fade-in">
       <v-row v-if="!isAuthenticated" wrap>
         <v-col xs="12">
@@ -18,7 +18,7 @@
                 <template #activator="{ on }">
                   <v-icon
                     v-on="on"
-                    @click="fetchAddress()"
+                    @click="fetchAddressFn()"
                   >
                     mdi-crosshairs-gps
                   </v-icon>
@@ -32,7 +32,7 @@
                   <v-icon
                     :disabled="!origin"
                     v-on="on"
-                    @click="saveOrigin(origin)"
+                    @click="saveOriginFn(origin)"
                   >
                     mdi-bookmark-plus-outline
                   </v-icon>
@@ -74,10 +74,10 @@
           />
         </v-col>
         <v-col cols="12" sm="4">
-          <v-checkbox v-model="state.includeHidden" :label="$t(&quot;events.includeHidden&quot;)" />
+          <v-checkbox v-model="state.includeHidden" :label="$t('events.includeHidden')" />
         </v-col>
       </v-row>
-      <list
+      <event-list
         :events="events"
         :has-user="isAuthenticated"
         :toggle-ignore="toggleIgnore"
@@ -93,10 +93,9 @@
   </div>
 </template>
 
-<script lang='ts'>
+<script setup lang='ts'>
-import { computed, defineComponent, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
-
+import EventList from './List/index.vue'
-import List from './List/index.vue'
 import { useAuth } from '~/plugins/auth'
 import { useTranslation } from '~/plugins/i18n'
 import {
@@ -112,145 +111,123 @@ import {
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
-export default defineComponent({
+const state = useState()
-  name: 'EventsPage',
+const range = computed(() => state.range)
-  components: {
+const { t } = useTranslation()
-    List
+state.setTitle(t('app.links.events'))
-  },
+const { isAuthenticated } = useAuth()
-  setup () {
+const variables = ref<FindEventsQueryVariables>({
-    const state = useState()
+  range: state.range,
-    const { t } = useTranslation()
+  includeOrigins: isAuthenticated.value || false,
-    state.setTitle(t('app.links.events'))
+  search: state.search,
-    const { loading: authLoading, isAuthenticated } = useAuth()
+  includeHidden: state.includeHidden
-    const variables = ref<FindEventsQueryVariables>({
-      range: state.range,
-      includeOrigins: isAuthenticated.value || false,
-      search: state.search,
-      includeHidden: state.includeHidden
-    })
-    const { result, refetch } = useFindEventsQuery(() => variables.value)
-    watch([state, isAuthenticated], () => {
-      variables.value.range = state.range
-      variables.value.search = state.search
-      variables.value.includeHidden = state.includeHidden
-      variables.value.includeOrigins = isAuthenticated.value || false
-      refetch(variables.value)
-    })
-    const events = computed(() => result.value?.events ?? [])
-    const origins = computed(() => result.value?.origins ?? [])
-    const submitting = ref(true)
-    const ranges = [
-      { name: '1 vecka', value: 'ONE_WEEK' },
-      { name: '2 veckor', value: 'TWO_WEEKS' },
-      { name: '1 månad', value: 'ONE_MONTH' },
-      { name: '1 kvartal', value: 'ONE_QUARTER' },
-      { name: '1 år', value: 'ONE_YEAR' }
-    ]
-    const snackbar = ref({ active: false, color: 'success', text: '' })
-
-    const origin = ref('')
-    const fetchEvents = () => {
-      const originsTemp = [...(origins.value || [])]
-      if (origin.value) {
-        originsTemp.push(origin.value)
-      }
-      variables.value = {
-        ...variables.value,
-        range: state.range,
-        origins: originsTemp,
-        includeOrigins: isAuthenticated.value || false
-      }
-      refetch(variables.value)
-    }
-
-    const { mutate: doToggleIgnoreBand } = useToggleIgnoreBandMutation({})
-    const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
-    const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
-    const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
-    const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
-
-    const toggleIgnoreSuccess = (name: string) => {
-      return () => {
-        fetchEvents()
-        snackbar.value.color = 'success'
-        snackbar.value.text = `${name} har dolts`
-        snackbar.value.active = true
-      }
-    }
-
-    const toggleIgnoreFailed = (name: string) => {
-      return () => {
-        snackbar.value.color = 'error'
-        snackbar.value.text = `${name} kunde inte döljas`
-        snackbar.value.active = true
-      }
-    }
-
-    const toggleIgnore = (type: string, name: string) => {
-      switch (type) {
-        case 'band':
-          doToggleIgnoreBand({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'danceHall':
-          doToggleIgnoreDanceHall({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'city':
-          doToggleIgnoreCity({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'municipality':
-          doToggleIgnoreMunicipality({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'state':
-          doToggleIgnoreState({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        default:
-      }
-    }
-
-    const { mutate: doSaveOrigin } = useSaveOriginMutation({})
-    const { refetch: doFetchAddress, load: loadFetchAddress } = useFetchAddressLazyQuery({ latlng: '' })
-    const fetchAddressFn = () => {
-      if (window.navigator) {
-        window.navigator.geolocation.getCurrentPosition((pos) => {
-          loadFetchAddress()
-          doFetchAddress({
-            latlng: `${pos.coords.latitude},${pos.coords.longitude}`
-          })?.then((result) => {
-            origin.value = result.data.address
-          })
-        })
-      }
-    }
-    const saveOriginFn = (o: string) =>
-      doSaveOrigin({ origin: o }).then(() => {
-        origin.value = ''
-        fetchEvents()
-      })
-
-    return {
-      authLoading,
-      isAuthenticated,
-      state,
-      events,
-      origins,
-      submitting,
-      ranges,
-      snackbar,
-      toggleIgnore,
-      origin,
-      fetchAddress: fetchAddressFn,
-      saveOrigin: saveOriginFn
-    }
-  }
 })
+const { result, refetch } = useFindEventsQuery(() => variables.value)
+watch([state, isAuthenticated], () => {
+  variables.value.range = state.range
+  variables.value.search = state.search
+  variables.value.includeHidden = state.includeHidden
+  variables.value.includeOrigins = isAuthenticated.value || false
+  refetch(variables.value)
+})
+const events = computed(() => result.value?.events ?? [])
+const origins = computed(() => result.value?.origins ?? [])
+const ranges = [
+  { name: '1 vecka', value: 'ONE_WEEK' },
+  { name: '2 veckor', value: 'TWO_WEEKS' },
+  { name: '1 månad', value: 'ONE_MONTH' },
+  { name: '1 kvartal', value: 'ONE_QUARTER' },
+  { name: '1 år', value: 'ONE_YEAR' }
+]
+const snackbar = ref({ active: false, color: 'success', text: '' })
+
+const origin = ref('')
+const fetchEvents = () => {
+  const originsTemp = [...(origins.value || [])]
+  if (origin.value) {
+    originsTemp.push(origin.value)
+  }
+  variables.value = {
+    ...variables.value,
+    range: state.range,
+    origins: originsTemp,
+    includeOrigins: isAuthenticated.value || false
+  }
+  refetch(variables.value)
+}
+
+const { mutate: doToggleIgnoreBand } = useToggleIgnoreBandMutation({})
+const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
+const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
+const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
+const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
+
+const toggleIgnoreSuccess = (name: string) => {
+  return () => {
+    fetchEvents()
+    snackbar.value.color = 'success'
+    snackbar.value.text = `${name} har dolts`
+    snackbar.value.active = true
+  }
+}
+
+const toggleIgnoreFailed = (name: string) => {
+  return () => {
+    snackbar.value.color = 'error'
+    snackbar.value.text = `${name} kunde inte döljas`
+    snackbar.value.active = true
+  }
+}
+
+const toggleIgnore = (type: string, name: string) => {
+  switch (type) {
+    case 'band':
+      doToggleIgnoreBand({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'danceHall':
+      doToggleIgnoreDanceHall({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'city':
+      doToggleIgnoreCity({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'municipality':
+      doToggleIgnoreMunicipality({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'state':
+      doToggleIgnoreState({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    default:
+  }
+}
+
+const { mutate: doSaveOrigin } = useSaveOriginMutation({})
+const { refetch: doFetchAddress, load: loadFetchAddress } = useFetchAddressLazyQuery({ latlng: '' })
+const fetchAddressFn = () => {
+  if (window.navigator) {
+    window.navigator.geolocation.getCurrentPosition((pos) => {
+      loadFetchAddress()
+      doFetchAddress({
+        latlng: `${pos.coords.latitude},${pos.coords.longitude}`
+      })?.then((result) => {
+        origin.value = result.data.address
+      })
+    })
+  }
+}
+const saveOriginFn = (o: string) =>
+  doSaveOrigin({ origin: o }).then(() => {
+    origin.value = ''
+    fetchEvents()
+  })
+
 </script>

components/pages/filters/List/index.vue

@@ -21,26 +21,23 @@
   </v-card>
 </template>
 
-<script>
+<script setup lang='ts'>
-export default {
+defineProps({
-  name: 'FiltersList',
+  model: {
-  props: {
+    type: Array,
-    model: {
+    required: true
-      type: Array,
+  },
-      required: true
+  title: {
-    },
+    type: String,
-    title: {
+    required: true
-      type: String,
+  },
-      required: true
+  type: {
-    },
+    type: String,
-    type: {
+    required: true
-      type: String,
+  },
-      required: true
+  toggleIgnore: {
-    },
+    type: Function,
-    toggleIgnore: {
+    required: true
-      type: Function,
-      required: true
-    }
   }
-}
+})
 </script>

components/pages/filters/index.vue

@@ -60,9 +60,8 @@
   </div>
 </template>
 
-<script lang='ts'>
+<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'
@@ -76,88 +75,68 @@ import {
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
-export default {
+const state = useState()
-  name: 'FiltersPage',
+const { t } = useTranslation()
-  components: {
+state.setTitle(t('app.links.filters'))
-    List
+const { isAuthenticated } = useAuth()
-  },
+const { result, refetch } = useFetchFiltersQuery()
-  setup () {
+const bands = computed(() => result.value?.bands ?? [])
-    const state = useState()
+const cities = computed(() => result.value?.cities ?? [])
-    const { t } = useTranslation()
+const danceHalls = computed(() => result.value?.danceHalls ?? [])
-    state.setTitle(t('app.links.filters'))
+const municipalities = computed(() => result.value?.municipalities ?? [])
-    const { isAuthenticated } = useAuth()
+const states = computed(() => result.value?.states ?? [])
-    const { result, loading, refetch } = useFetchFiltersQuery()
+const snackbar = ref({ active: false, color: 'success', text: '' })
-    const bands = computed(() => result.value?.bands ?? [])
+const { mutate: doToggleIgnoreBand } = useToggleIgnoreBandMutation({})
-    const cities = computed(() => result.value?.cities ?? [])
+const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
-    const danceHalls = computed(() => result.value?.danceHalls ?? [])
+const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
-    const municipalities = computed(() => result.value?.municipalities ?? [])
+const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
-    const states = computed(() => result.value?.states ?? [])
+const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
-    const snackbar = ref({ active: false, color: 'success', text: '' })
-    const { mutate: doToggleIgnoreBand } = useToggleIgnoreBandMutation({})
-    const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
-    const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
-    const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
-    const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
 
-    const toggleIgnoreSuccess = (name: string) => {
+const toggleIgnoreSuccess = (name: string) => {
-      return () => {
+  return () => {
-        refetch()
+    refetch()
-        snackbar.value.color = 'success'
+    snackbar.value.color = 'success'
-        snackbar.value.text = t('filters.success', { name })
+    snackbar.value.text = t('filters.success', { name })
-        snackbar.value.active = true
+    snackbar.value.active = true
-      }
+  }
-    }
+}
 
-    const toggleIgnoreFailed = (name: string) => {
+const toggleIgnoreFailed = (name: string) => {
-      return () => {
+  return () => {
-        snackbar.value.color = 'error'
+    snackbar.value.color = 'error'
-        snackbar.value.text = t('filters.failure', { name })
+    snackbar.value.text = t('filters.failure', { name })
-        snackbar.value.active = true
+    snackbar.value.active = true
-      }
+  }
-    }
+}
 
-    const toggleIgnore = (type: string, name: string) => {
+const toggleIgnore = (type: string, name: string) => {
-      switch (type) {
+  switch (type) {
-        case 'band':
+    case 'band':
-          doToggleIgnoreBand({ name })
+      doToggleIgnoreBand({ name })
-            .then(toggleIgnoreSuccess(name))
+        .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
+        .catch(toggleIgnoreFailed)
-          break
+      break
-        case 'danceHall':
+    case 'danceHall':
-          doToggleIgnoreDanceHall({ name })
+      doToggleIgnoreDanceHall({ name })
-            .then(toggleIgnoreSuccess(name))
+        .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
+        .catch(toggleIgnoreFailed)
-          break
+      break
-        case 'city':
+    case 'city':
-          doToggleIgnoreCity({ name })
+      doToggleIgnoreCity({ name })
-            .then(toggleIgnoreSuccess(name))
+        .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
+        .catch(toggleIgnoreFailed)
-          break
+      break
-        case 'municipality':
+    case 'municipality':
-          doToggleIgnoreMunicipality({ name })
+      doToggleIgnoreMunicipality({ name })
-            .then(toggleIgnoreSuccess(name))
+        .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
+        .catch(toggleIgnoreFailed)
-          break
+      break
-        case 'state':
+    case 'state':
-          doToggleIgnoreState({ name })
+      doToggleIgnoreState({ name })
-            .then(toggleIgnoreSuccess(name))
+        .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
+        .catch(toggleIgnoreFailed)
-          break
+      break
-        default:
+    default:
-      }
-    }
-
-    return {
-      isAuthenticated,
-      loading,
-      bands,
-      danceHalls,
-      cities,
-      municipalities,
-      states,
-      snackbar,
-      toggleIgnore
-    }
   }
 }
 </script>

components/pages/origins/index.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-layout row wrap>
         <v-flex xs12>
@@ -13,7 +13,7 @@
                 <template #activator="{ on }">
                   <v-icon
                     v-on="on"
-                    @click="fetchAddress()"
+                    @click="fetchAddressFn()"
                   >
                     mdi-crosshairs-gps
                   </v-icon>
@@ -27,7 +27,7 @@
                   <v-icon
                     :disabled="!origin"
                     v-on="on"
-                    @click="saveOrigin(origin)"
+                    @click="saveOriginFn(origin)"
                   >
                     mdi-bookmark-plus-outline
                   </v-icon>
@@ -44,7 +44,7 @@
             <template #activator="{ on }">
               <v-icon
                 v-on="on"
-                @click="removeOrigin(o)"
+                @click="removeOriginFn(o)"
               >
                 mdi-delete-outline
               </v-icon>
@@ -65,8 +65,8 @@
   </div>
 </template>
 
-<script lang='ts'>
+<script setup lang='ts'>
-import { computed, defineComponent, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useAuth } from '~/plugins/auth'
 import { useTranslation } from '~/plugins/i18n'
 import {
@@ -77,49 +77,34 @@ import {
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
-export default defineComponent({
+const state = useState()
-  name: 'OriginsPage',
+const { t } = useTranslation()
-  setup () {
+state.setTitle(t('app.links.origins'))
-    const state = useState()
+const { isAuthenticated } = useAuth()
-    const { t } = useTranslation()
+const { result, refetch } = useFindOriginsQuery()
-    state.setTitle(t('app.links.origins'))
+const origins = computed(() => result.value?.origins ?? [])
-    const { isAuthenticated } = useAuth()
+const snackbar = ref({ active: false, color: 'success', text: '' })
-    const { result, loading, refetch } = useFindOriginsQuery()
+const { mutate: doSaveOrigin } = useSaveOriginMutation({})
-    const origins = computed(() => result.value?.origins ?? [])
+const { mutate: doRemoveOrigin } = useRemoveOriginMutation({})
-    const snackbar = ref({ active: false, color: 'success', text: '' })
+const { refetch: doFetchAddress, load } = useFetchAddressLazyQuery({ latlng: '' })
-    const { mutate: doSaveOrigin } = useSaveOriginMutation({})
+const origin = ref('')
-    const { mutate: doRemoveOrigin } = useRemoveOriginMutation({})
+const fetchAddressFn = () => {
-    const { refetch: doFetchAddress, load } = useFetchAddressLazyQuery({ latlng: '' })
+  if (window.navigator) {
-    const origin = ref('')
+    window.navigator.geolocation.getCurrentPosition((pos) => {
-    const fetchAddressFn = () => {
+      load()
-      if (window.navigator) {
+      doFetchAddress({
-        window.navigator.geolocation.getCurrentPosition((pos) => {
+        latlng: `${pos.coords.latitude},${pos.coords.longitude}`
-          load()
+      })?.then((res) => {
-          doFetchAddress({
+        origin.value = res.data.address
-            latlng: `${pos.coords.latitude},${pos.coords.longitude}`
-          })?.then((res) => {
-            origin.value = res.data.address
-          })
-        })
-      }
-    }
-    const saveOriginFn = (o: string) =>
-      doSaveOrigin({ origin: o }).then(() => {
-        refetch()
-        origin.value = ''
       })
-    const removeOriginFn = (o: string) =>
+    })
-      doRemoveOrigin({ origin: o }).then(() => refetch())
-    return {
-      isAuthenticated,
-      loading,
-      origins,
-      snackbar,
-      origin,
-      saveOrigin: saveOriginFn,
-      removeOrigin: removeOriginFn,
-      fetchAddress: fetchAddressFn
-    }
   }
-})
+}
+const saveOriginFn = (o: string) =>
+  doSaveOrigin({ origin: o }).then(() => {
+    refetch()
+    origin.value = ''
+  })
+const removeOriginFn = (o: string) =>
+  doRemoveOrigin({ origin: o }).then(() => refetch())
 </script>

layouts/components/themed.vue

@@ -4,18 +4,13 @@
   </div>
 </template>
 
-<script>
+<script setup lang='ts'>
 import { getCurrentInstance } from 'vue'
 import { useState } from '~/store'
 
-export default {
+const instance = getCurrentInstance()
-  name: 'ThemedLayout',
+const state = useState()
-  setup () {
+if (instance) {
-    const instance = getCurrentInstance()
+  instance.proxy.$vuetify.theme.dark = state.darkMode
-    const state = useState()
-    if (instance) {
-      instance.proxy.$vuetify.theme.dark = state.darkMode
-    }
-  }
 }
 </script>

layouts/default.vue

@@ -78,80 +78,63 @@
   </v-app>
 </template>
 
-<script>
+<script setup lang='ts'>
 
 import { computed, getCurrentInstance, provide, ref } from 'vue'
 import { DefaultApolloClient } from '@vue/apollo-composable'
-import Themed from './components/themed'
+import Themed from './components/themed.vue'
 import { useAuth } from '~/plugins/auth'
 import { useState } from '~/store'
 
-export default {
+const instance = getCurrentInstance()
-  name: 'DefaultLayout',
+if (instance) {
-  components: {
+  provide(DefaultApolloClient, instance.proxy.$apollo)
-    Themed
+}
-  },
+const state = useState()
-  setup () {
+const router = useRouter()
-    const instance = getCurrentInstance()
+const onRedirectCallback = (appState) => {
+  router.push(
+    appState && appState.targetUrl
+      ? appState.targetUrl
+      : window.location.pathname
+  )
+}
+const { loading, isAuthenticated, user, loginWithRedirect, logout } =
+  useAuth(onRedirectCallback)
+const doLogin = () => {
+  loginWithRedirect({
+    appState: { targetUrl: window.location.pathname }
+  })
+}
+const doLogout = () => {
+  logout({
+    logoutParams: {
+      returnTo: window.location.origin
+    }
+  })
+}
+const darkMode = computed({
+  get: () => (instance ? instance.proxy.$vuetify.theme.dark : false),
+  set: (val) => {
     if (instance) {
-      provide(DefaultApolloClient, instance.proxy.$apollo)
+      instance.proxy.$vuetify.theme.dark = val
-    }
+      state.setDarkMode(instance.proxy.$vuetify.theme.dark)
-    const state = useState()
-    const router = useRouter()
-    const onRedirectCallback = (appState) => {
-      router.push(
-        appState && appState.targetUrl
-          ? appState.targetUrl
-          : window.location.pathname
-      )
-    }
-    const { loading, isAuthenticated, user, loginWithRedirect, logout } =
-      useAuth(onRedirectCallback)
-    const doLogin = () => {
-      loginWithRedirect()
-    }
-    const doLogout = () => {
-      logout({
-        logoutParams: {
-          returnTo: window.location.origin
-        }
-      })
-    }
-    const darkMode = computed({
-      get: () => (instance ? instance.proxy.$vuetify.theme.dark : false),
-      set: (val) => {
-        if (instance) {
-          instance.proxy.$vuetify.theme.dark = val
-          state.setDarkMode(instance.proxy.$vuetify.theme.dark)
-        }
-      }
-    })
-    const locale = computed({
-      get: () => (instance ? instance.proxy.$i18n.locale : 'sv'),
-      set: (newLocale) => {
-        if (instance) {
-          instance.proxy.$i18n.setLocaleCookie(newLocale)
-          instance.proxy.$vuetify.lang.current = newLocale
-          instance.proxy.$i18n.locale = newLocale
-        }
-        state.setLocale(newLocale)
-      }
-    })
-
-    const nav = ref(false)
-    locale.value = instance.proxy.$i18n.locale
-
-    return {
-      title: state.title,
-      loading,
-      isAuthenticated,
-      user,
-      doLogin,
-      doLogout,
-      darkMode,
-      locale,
-      nav
     }
   }
-}
+})
+const locale = computed({
+  get: () => (instance ? instance.proxy.$i18n.locale : 'sv'),
+  set: (newLocale) => {
+    if (instance) {
+      instance.proxy.$i18n.setLocaleCookie(newLocale)
+      instance.proxy.$vuetify.lang.current = newLocale
+      instance.proxy.$i18n.locale = newLocale
+    }
+    state.setLocale(newLocale)
+  }
+})
+
+const nav = ref(false)
+locale.value = instance.proxy.$i18n.locale
+const title = computed(() => state.title)
 </script>

nuxt.config.js

@@ -6,6 +6,9 @@ export default defineNuxtConfig({
   alias: {
     tslib: 'tslib/tslib.es6.js'
   },
+  bridge: {
+    meta: true
+  },
   build: {
     extend (config) {
       config.module.rules.push({
@@ -33,7 +36,7 @@ export default defineNuxtConfig({
         prettify: false
       }
     },
-    transpile: ['date-fns']
+    transpile: ['date-fns', '@unhead/vue', 'unhead']
   },
   buildModules: [
     // https://go.nuxtjs.dev/eslint

package.json

@@ -67,6 +67,7 @@
     "eslint-plugin-nuxt": "^4.0.0",
     "eslint-plugin-vue": "^9.21.1",
     "husky": "^9.0.10",
+    "nuxi": "^3.10.0",
     "postcss-html": "^1.6.0",
     "stylelint": "^14.16.1",
     "stylelint-config-recommended-vue": "^1.5.0",

pages/filters.vue

@@ -2,20 +2,13 @@
   <filters />
 </template>
 
-<script>
+<script setup lang='ts'>
-import Filters from '../components/pages/filters'
+import { useHead } from '@unhead/vue'
-import { useTranslation } from '../plugins/i18n'
+import Filters from '../components/pages/filters/index.vue'
+import { useTranslation } from '~/plugins/i18n'
 
-export default {
+const { t } = useTranslation()
-  name: 'FiltersPage',
+useHead({
-  components: {
+  title: t('filters.title')
-    Filters
+})
-  },
-  head () {
-    const { t } = useTranslation()
-    return {
-      title: t('filters.title')
-    }
-  }
-}
 </script>

pages/index.vue

@@ -2,20 +2,13 @@
   <events />
 </template>
 
-<script lang='ts'>
+<script setup lang='ts'>
+import { useHead } from '@unhead/vue'
 import Events from '~/components/pages/events/index.vue'
 import { useTranslation } from '~/plugins/i18n'
 
-export default {
+const { t } = useTranslation()
-  name: 'IndexPage',
+useHead({
-  components: {
+  title: t('events.title')
-    Events
+})
-  },
-  head () {
-    const { t } = useTranslation()
-    return {
-      title: t('events.title')
-    }
-  }
-}
 </script>

pages/origins.vue

@@ -2,20 +2,13 @@
   <origins />
 </template>
 
-<script>
+<script setup lang='ts'>
-import Origins from '../components/pages/origins'
+import { useHead } from '@unhead/vue'
-import { useTranslation } from '../plugins/i18n'
+import Origins from '../components/pages/origins/index.vue'
+import { useTranslation } from '~/plugins/i18n'
 
-export default {
+const { t } = useTranslation()
-  name: 'OriginsPage',
+useHead({
-  components: {
+  title: t('origins.title')
-    Origins
+})
-  },
-  head () {
-    const { t } = useTranslation()
-    return {
-      title: t('origins.title')
-    }
-  }
-}
 </script>