vue3 infinite loading

Infinite scroll component compatible with vuejs-3 and vitejs

oumoussa98
18
9
Vue

vue 3 infinite loading

Intro

An infinite scroll component compatible with vue.js 3 and vite, to help you implement an infinite scroll list more easily.

Features

  • Lightweight and simple to use
  • Internal spinner
  • 2-directional support (Top and bottom)

Install

npm install v3-infinite-loading

Basic usage

register globally:

import InfiniteLoading from "v3-infinite-loading";
import "v3-infinite-loading/lib/style.css"; //required if you're not going to override default slots

const app = createApp(App);

app.component("infinite-loading", InfiniteLoading);

app.mount("#app");

usage in SFC with script setup:

<script setup>
  import InfiniteLoading from "v3-infinite-loading";
  import "v3-infinite-loading/lib/style.css"; //required if you're not going to override default slots
</script>

<template>
  <InfiniteLoading />
</template>

Browser usage

<html>
  <head>
    <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
    <script src="https://unpkg.com/[email protected]/lib/v3-infinite-loading.umd.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/lib/style.css"
    />
  </head>
  <body>
    <div id="app">
      <infinite-loading target="#app" @infinite="infiniteHandler"></infinite-loading>
    </div>
    <script>
      const { ref, createApp } = Vue;
      const app = createApp({
        // your app
      });
      app.component("infinite-loading", V3InfiniteLoading.default);
      app.mount("#app");
    </script>
  </body>
</html>

Checkout a full working example on codepen or github gists

Usage & Guide

Documentation available on v3-infinite-loading Netlify

Check out live demo v3-infinite-loading-demo Netlify

Changelog

Detailed changes for each release are documented in the release notes.

Contribution

Comming soon

Licence

The MIT License (MIT)