chore: migrate to script setup style

components/pages/events/Event/distance.vue

@@ -16,27 +16,19 @@
   </v-layout>
 </template>
 
-<script lang='ts'>
-import { computed, defineComponent, PropType } from 'vue'
+<script setup lang='ts'>
+import { computed, PropType } from 'vue'
 import { DanceHallDistance } from '~/graphql/generated/operations'
 
-export default defineComponent({
-  name: 'DistanceDisplay',
-  props: {
-    distance: {
-      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 props = defineProps({
+  distance: {
+    type: Object as PropType<DanceHallDistance>,
+    required: true
   }
 })
+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({
-  name: 'EventDetail',
-  components: { DistanceDisplay },
-  props: {
-    event: {
-      type: Object as PropType<Event>,
-      required: true
-    },
-    hasUser: {
-      type: Boolean,
-      required: true
-    },
-    toggleIgnore: {
-      type: Function,
-      required: true
-    }
+const props = defineProps({
+  event: {
+    type: Object as PropType<Event>,
+    required: true
   },
-  setup (props) {
-    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
-    }))
-    return {
-      weekday,
-      daysUntil
-    }
+  hasUser: {
+    type: Boolean,
+    required: true
+  },
+  toggleIgnore: {
+    type: Function,
+    required: true
   }
 })
+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>