InfiniteQuick Demo
Where going to create a simple example using vite and vuejs 3
I'v already made a live demo you can check it out Demo Netlify
create a new project
bash
npm init vite@latest infinite-demo --template vue
bash
cd infinite-demo && npm install
Install our infinite loading component
bash
npm install v3-infinite-loading
Implementation
Go to App.vue component and override the script with this one We're using {JSON} Placeholder API to get some dummy data
html
<script setup>
import { ref } from 'vue'
import InfiniteLoading from 'v3-infinite-loading'
import 'v3-infinite-loading/lib/style.css'
let comments = ref([])
let page = 1
const load = async ($state) => {
console.log('loading...')
try {
const response = await fetch(
'https://jsonplaceholder.typicode.com/comments?_limit=10&_page=' +
page
)
const json = await response.json()
if (json.length < 10) $state.complete()
else {
comments.value.push(...json)
$state.loaded()
}
page++
} catch (error) {
$state.error()
}
}
</script>
Now let's add a template to display the results
html
<template>
<div class="result" v-for="comment in comments" :key="comment.id">
<div>{{ comment.email }}</div>
<div>{{ comment.id }}</div>
</div>
<InfiniteLoading @infinite="load" />
</template>
Lets add a bit of css style
html
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.result {
display: flex;
flex-direction: column;
gap: 5px;
font-weight: 300;
width: 400px;
padding: 10px;
text-align: center;
margin: 0 auto 10px auto;
background: #eceef0;
border-radius: 10px;
}
</style>
Start the dev server
bash
npm run dev
And congrats you made it 🎉