Бесконечная прокрутка с загрузкой данных

 Эффект, когда скроллишь страницу, и при достижении границы подгружаются новые данные (карточки с товарами и пр).

<template>
  <div class="page">
    <div class="card" v-for="item in data" :key="item.id">
      Some layout for data
    </div>
    <p v-if="loading">Загрузка, подождите...</p>
  </div>
</template>
<script>
import { onMounted, ref } from "vue"

export default {
  setup() {
    const data= ref([])
    let loading = ref(true)
    let pagination = ref({
      perPage: 0,
      hasPages: false,
      nextPageUrl: '',
      prevPageUrl: ''
    })

    const loadMoreData = async () => {
      if (pagination.value.hasPages) {
        paginationLoading.value = true
        let obUrl = new URL(pagination.value.nextPageUrl)
        let cursor = obUrl.searchParams.get("cursor")

        await axios.post('api/data', {'cursor': cursor})
          .then(response => {
            pagination.value = response.data.pagination
            data.value.push(...response.data.items)
          })
          .catch(error => {
            console.log(error)
          })
          .finally(() => {
            loading.value = false
          })
      }
    }

    onMounted(() => {
      window.onscroll = () => {
        let bottomWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight

        if (bottomWindow) {
          loadMoreData()
        }
      }
    })

    return {
      data,
      loading
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

В данном примере, также, затронута работа с Laravel cursor pagination.