@thy-rathana/nuxt-infinite-scroll/README.md

Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

# Nuxt Minimal Starter

Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Installation

Make sure to install dependencies:

```bash
# npm
npm install @thy-rathana/nuxt-infinite-scroll

# pnpm
pnpm install @thy-rathana/nuxt-infinite-scroll

# yarn
yarn add @thy-rathana/nuxt-infinite-scroll

# bun
bun install @thy-rathana/nuxt-infinite-scroll
```

## Usage

#### Page display data

```ts
<script lang="ts" setup>
import { useNuxtInfiniteScroll } from "@thy-rathana/nuxt-infinite-scroll";

const fetchFn = async (query: NotificationReq) => {
  const { data } = await yourImplementFetch({ query });
  return {
    ...data?.value?.data,
    list: data?.value?.data?.noticeList,
  };
};

const {
  items: messages,
  data,
  ...rest
} = await useNuxtInfiniteScroll({
  fetchFn,
  filters: {
    // query: NotificationReq
    status: NotificationStatus.RELEASED,
  },
  pageSize: 12,
});
</script>

<template>
  <InfiniteScroll v-bind="rest">
    <div class="flex flex-col gap-2 overflow-auto">
      <div
        v-for="(item, index) in messages"
        :key="index"
        class="flex items-center gap-3 bg-surface px-3 py-2 rounded-[10px]"
      >
        {{ item.title }}
        ....
      </div>
    </div>
  </InfiniteScroll>
</template>
```

#### Component InfiniteScroll.vue

```ts
<!-- create InfiniteScroll component or use <div ref="targetRef" /> direct -->

<script lang="ts" setup>
import type { UseInfiniteScrollFetch } from "@thy-rathana/nuxt-infinite-scroll";

const props = defineProps<Partial<UseInfiniteScrollFetch>>();
const { setTarget, isLoading, isNoData } = props;

const targetRef = ref<HTMLElement | null>(null);

onMounted(() => {
  if (targetRef.value) {
    setTarget?.(targetRef.value);
  }
});
</script>

<template>
  <slot />
  <div ref="targetRef" />

  <!-- your extra implement -->
    <CommonNoData v-if="isNoData" class="mt-[20%]" />
    <slot name="loading">
    <div v-if="isLoading" class="flex justify-center items-center my-4">
      <UIcon name="eos-icons:three-dots-loading" class="text-lg" />
    </div>
  </slot>
</template>
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.