https://github.com/jfet97/vue-use-infinite-scroll

A Vue composition function that makes infinite scroll a breeze.
https://github.com/jfet97/vue-use-infinite-scroll

Last synced: about 2 months ago
JSON representation

A Vue composition function that makes infinite scroll a breeze.

• Host: GitHub
• URL: https://github.com/jfet97/vue-use-infinite-scroll
• Owner: jfet97
• License: mit
• Created: 2020-07-31T17:04:14.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T23:06:33.000Z (over 1 year ago)
• Last Synced: 2024-11-11T23:47:04.221Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 175 KB
• Stars: 111
• Watchers: 4
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-3 - vue-use-infinite-scroll - ♾️ A Vue composition function that makes infinite scroll a breeze (Packages)

README

        
# vue-use-infinite-scroll

## Installation

```sh

npm i -S vue-use-infinite-scroll

```

## Usage

### template

```html



    {{ errorMessageRef }}

    


        
{{ item }}


        

        


    



```


### script

```js

import { ref, watch } from 'vue'

import { makeUseInfiniteScroll } from 'vue-use-infinite-scroll'

export default {

    setup() {

        // INTERSECTION OBSERVER

        // set the intersection options object

        // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

        const useInfiniteScroll = makeUseInfiniteScroll({}) // the argument is optional

        // create the template ref for the element that

        // will trigger the intersection observer

        const intersectionTrigger = ref(null) // as Ref

        // useInfiniteScroll returns a pageRef, starting from page 1,

        // which changes we should listen to fetch more data

        const pageRef = useInfiniteScroll(intersectionTrigger)

        watch(

            pageRef,

            (page) => {

                fetchItems(page)

            },

            { immediate: true }

        )

        // DATA

        const itemsRef = ref([])

        const errorMessageRef = ref('')

        async function fetchItems(page) {

            fetch(`https://jsonplaceholder.typicode.com/comments?_page=${page}&_limit=10`)

                .then((res) => res.json())

                .then((data) => itemsRef.value.push(...data))

                .catch((error) => (errorMessageRef.value = error.message))

        }

        return { intersectionTrigger, itemsRef, errorMessageRef }

    },

}

```

Try it [here](https://codesandbox.io/s/vue-use-infinite-scroll-vclfp?file=/src/App.vue) 🙂!