Having some trouble with setting up the pagination feature from Nuxt UI. Despite trying to research through documentation and videos, I can't seem to figure out how to connect my data to the component.
<template>
<div>
<ul class="p-5">
<li v-for="creator in creators" class="mb-5"gt;
<nuxt-link
:key="creator.id"
:to="`/creator/${creator.slug}`>
<div class="creatorCard" :style="{ background: `url(${creator.banner}) center center no-repeat`, backgroundSize: `100% auto` }>
<div class="glassEffect">
<div class="text pl-5 items-end h-1 pb-2">
<p class="font-bold">{{ creator.label }}</p>
<p class="italic">{{ creator.ig }}</p>
</div>
</div>
</div>
</nuxt-link>
</li>
</ul>
<div class="pb-4">
<UPagination :ui="{ wrapper: 'justify-center'}" v-model="page" :page-count="7" :total="creators.length" />
</div>
</div>
</template>
<script setup lang="ts">
const page = ref(1);
const creators = useCreators();
useHead({
title: 'Creators',
})
</script>