cosette/pages/index.vue

<script setup>
const cosette = await $fetch('/api/cosette')

</script>
<template>
  <section class="bg-white py-8">
    
    <Upload />
    <Hero/>

    <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12 px-2">
      <nav id="store" class="w-full z-30 top-0 px-6 py-1">
        <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3">
          <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-yellow text-xl" href="https://it.hackmeeting.org">Hackmeeting 0x19</a>
            <div class="flex items-center" id="store-nav-content">
              <a class="pl-3 inline-block no-underline hover:text-black modal-button" href="#my-modal">
                <Icon-ic:baseline-add/>
              </a>
              <a class="pl-3 inline-block no-underline hover:text-black" href="#">
                  <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                      <path d="M10,18c1.846,0,3.543-0.635,4.897-1.688l4.396,4.396l1.414-1.414l-4.396-4.396C17.365,13.543,18,11.846,18,10 c0-4.411-3.589-8-8-8s-8,3.589-8,8S5.589,18,10,18z M10,4c3.309,0,6,2.691,6,6s-2.691,6-6,6s-6-2.691-6-6S6.691,4,10,4z" />
                  </svg>
              </a>
            </div>
        </div>
      </nav>
      <div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-5">
        <Cosetta v-for='cosetta in cosette' :key='cosetta.id' :cosetta='cosetta' />
      </div>

    </div>

  </section>

</template>