Migration to nuxt 4

Used codemods CLI and reworked most alias'd path that stopped working

app/components/calendar/dialog/QuickCreateEvent.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
+import { PhPlus } from "@phosphor-icons/vue";
+import { VisuallyHidden } from "radix-vue";
+
+const isDialogOpen = ref<boolean>(false);
+const { resetSkeleton } = useCalendar();
+
+// Toggles the dialog
+function toggleDialog() {
+  isDialogOpen.value = !isDialogOpen.value;
+};
+
+/**
+ * Prevents the modal from closing if's still loading
+ */
+function handleClosing() {
+  setTimeout(() => resetSkeleton(), 100)
+}
+
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
+</script>
+
+<template>
+  <ClientOnly>
+    <Transition name="fade" appear>
+      <UiButton
+        class="max-md:fixed max-md:bottom-8 max-md:right-8 max-md:z-50 max-md:size-14 max-md:rounded-xl"
+        :size="breakpoints.md.value ? 'default' : 'icon'"
+        @click="toggleDialog"
+      >
+        <PhPlus :size="breakpoints.md.value ? 18 : 24" weight="bold" />
+
+        <strong v-if="breakpoints.md.value" class="font-semibold">
+          {{ $t("entity.calendar.event.newEvent") }}
+        </strong>
+      </UiButton>
+    </Transition>
+  </ClientOnly>
+
+  <UiDialog v-model:open="isDialogOpen">
+    <UiDialogContent
+      class="max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
+      :trap-focus="true"
+      @escape-key-down="handleClosing"
+      @pointer-down-outside.prevent="handleClosing"
+    >
+      <UiDialogTitle class="max-md:mb-8">
+        {{ $t("entity.calendar.event.addSingle") }}
+      </UiDialogTitle>
+
+      <VisuallyHidden>
+        <UiDialogDescription>
+          {{ $t("entity.calendar.event.addSingleDescription") }}
+        </UiDialogDescription>
+      </VisuallyHidden>
+
+      <CalendarFormCreateEvent @event-created="toggleDialog" />
+    </UiDialogContent>
+  </UiDialog>
+</template>