delete endpoint replaced with post

src/layers/core/data/pages/index.vue

@@ -73,7 +73,7 @@ const addItem = async () => {
 
 const deleteItem = async (item: Pick<Item, 'id'>) => {
   await $fetch('/api/v1/items', {
-    method: 'delete',
+    method: 'post',
     body: {
       id: item.id,
     },

src/layers/core/data/server/api/v1/items/index.post.ts

@@ -0,0 +1,37 @@
+import type { Item } from '@demo/data/types/items.d'
+import { z } from 'zod'
+
+export default defineEventHandler(async (event) => {
+  const body = await readValidatedBody(
+    event,
+    z.object({
+      id: z.string().nonempty().max(255),
+    }).safeParse)
+
+  if (body.error) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Invalid URL parameters',
+      data: body.error,
+    })
+  }
+
+  const items = await hubKV().get<Item[]>('items') ?? []
+  const index = items.findIndex((item) => {
+    return item.id === body.data.id
+  })
+
+  if (index === -1) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Item not found',
+      data: { id: body.data.id },
+    })
+  }
+
+  items.splice(index, 1)
+
+  await hubKV().set('items', items)
+
+  setResponseStatus(event, 200, `Item ${body.data.id} deleted`)
+})

src/layers/ui/app.vue

@@ -6,7 +6,9 @@
           role="alert"
           class="alert alert-error w-full px-4 sm:px-8 shadow-lg pointer-events-auto"
         >
-          <span>{{ error.value.statusMessage ?? 'Something went wrong' }}</span>
+          <span>
+            {{ error?.value?.statusMessage ?? 'Something went wrong' }}
+          </span>
           <button
             type="button"
             class="btn btn-sm btn-ghost"