https://github.com/lucas-labs/vue3-vsl
📜 Vuejs 3 virtual scroll list
https://github.com/lucas-labs/vue3-vsl
infinite-scroller scroller typescript virtual-list virtual-scroll virtual-scroller vuejs3
Last synced: 11 months ago
JSON representation
📜 Vuejs 3 virtual scroll list
- Host: GitHub
- URL: https://github.com/lucas-labs/vue3-vsl
- Owner: lucas-labs
- License: mit
- Created: 2022-06-12T22:07:46.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-06-23T11:05:28.000Z (almost 4 years ago)
- Last Synced: 2024-10-05T11:37:51.931Z (over 1 year ago)
- Topics: infinite-scroller, scroller, typescript, virtual-list, virtual-scroll, virtual-scroller, vuejs3
- Language: TypeScript
- Homepage:
- Size: 169 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🔎 @lucas-labs/vue3-vsl (virtual-scroll-list) is a Vuejs 3 component plugin. Heavily based on tangbc/vue-virtual-scroll-list. Basically the same but ported to Vuejs 3 + typescript + Composition API.
## Install
### npm
```bash
npm i @lucas-labs/vue3-vsl
```
### pnpm
```bash
pnpm i @lucas-labs/vue3-vsl
```
### yarn
```bash
yarn add @lucas-labs/vue3-vsl
```
## Usage
```vue
hello!
...
#{{ index }}
{{ item.id }} | {{ item.username }}
import { ref } from 'vue';
import { VirtualScroller } from '@lucas-labs/vue3-vsl';
const users = ref<{ id: number | string; username: string }[]>([]);
const fetchUsers = () => {
users.value = ...
};
const bottom = () => {
// we reached the bottom of the list...
// fetch more users maybe?
...
};
fetchUsers();
```
### Use globally
```typescript
// main.ts/main.js
import { createApp } from 'vue'
import App from './App.vue'
// import the plugin
import VirtualScrollerPlugin from '@lucas-labs/vue3-vsl';
const app = createApp(App);
// use the plugin to make it
// available in all your components
app.use(VirtualScrollerPlugin);
app.mount('#app');
```
# TODO
- [ ] Add tests!