Migration to nuxt 4

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

app/components/world/PreviewCard.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { PhArchive, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue"
+import type { World } from "@@/models/World"
+import { DateTime } from "luxon"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  world: World
+}>()
+
+const emit = defineEmits(["on-edit", "on-delete"])
+
+const cardRef = ref(null)
+const isCardHovered = useElementHover(cardRef)
+const { focused: isCardFocused } = useFocusWithin(cardRef)
+
+const { locale } = useI18n()
+const createdAt = DateTime.fromISO(props.world.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value })
+const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromISO(props.world.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "")
+</script>
+
+<template>
+  <UiCard
+    ref="cardRef"
+    class="w-full h-full flex flex-col"
+    :link="`/my/worlds/${world.id}`"
+    :class="cn(
+      world.color ? `card-color element-${world.color}` : '',
+    )"
+  >
+    <UiCardHeader class="gap-4">
+      <UiCardTitle>
+        {{ world.name }}
+      </UiCardTitle>
+      <div v-if="world.state === 'published'" class="flex items-center gap-1 text-sm">
+        <PhFile size="20" weight="fill" />
+        <span>{{ $t('ui.contentState.published') }}</span>
+      </div>
+      <div v-if="world.state === 'draft'" class="flex items-center gap-1 text-sm">
+        <PhFileDashed size="20" weight="fill" />
+        <span>{{ $t('ui.contentState.draft') }}</span>
+      </div>
+      <div v-if="world.state === 'archived'" class="flex items-center gap-1 text-sm">
+        <PhArchive size="20" weight="fill" />
+        <span>{{ $t('ui.contentState.archived') }}</span>
+      </div>
+    </UiCardHeader>
+
+    <UiCardContent class="grow">
+      <p class="italic">{{ world.description }}</p>
+
+      <div
+        v-if="isCardHovered || isCardFocused"
+        class="flex gap-2 absolute top-4 right-4 z-20"
+      >
+        <Transition name="fade" appear>
+          <UiButton size="icon" variant="outline" class="size-8 border-foreground/20 group-hover:border-foreground/30 hover:text-background hover:border-foreground hover:bg-foreground" @click="emit('on-edit')">
+            <PhPencil size="15" weight="fill" />
+          </UiButton>
+        </Transition>
+        <Transition name="fade" appear>
+          <UiButton size="icon" variant="outline" class="size-8 border-foreground/25 group-hover:border-foreground/40 hover:text-background hover:border-rose-500 hover:bg-rose-500" @click="emit('on-delete')">
+            <PhTrash size="15" weight="fill" />
+          </UiButton>
+        </Transition>
+      </div>
+    </UiCardContent>
+
+    <hr>
+
+    <UiCardFooter class="border-t-0">
+      <ul class="grid gap-1 text-sm">
+        <li class="flex gap-1 items-center">
+          <PhFilePlus size="18" />
+          <span>{{ $t('common.createdAt', { createdAt }) }}</span>
+        </li>
+        <li v-if="updatedAt" class="flex gap-1 items-center">
+          <PhPencilSimpleLine size="18" />
+          <span>{{ $t('common.updatedAt', { updatedAt }) }}</span>
+        </li>
+      </ul>
+    </UiCardFooter>
+  </UiCard>
+</template>