personae/app/pages/edit.vue

<template>
  <div>
    <SpinnerModal
      v-if="isLoading"
      :visible="true"
    />

    <CharacterEditor
      v-else
      action="update"
      :characterId="characterId"
      :initialValue="character"
      :class="isPlaceholderData && 'bg-primary/15'"
    />
  </div>
</template>

<script setup>
definePageMeta({
  name: "characterEdit",
  path: "/edit/:characterId(\\d+)",
  middleware: "signed-in"
})

const characterId = _toString(useRoute("characterEdit").params?.characterId)
const { data: character, isLoading, isPlaceholderData } = useQuery(() => characterByIdQuery(characterId))
</script>

<style scoped></style>