{"id":21368307,"url":"https://github.com/logustra/vinscroll","last_synced_at":"2026-03-19T20:05:13.889Z","repository":{"id":57682886,"uuid":"494750523","full_name":"logustra/vinscroll","owner":"logustra","description":"🖱 A minimalist infinite scroll component for vue 2-3","archived":false,"fork":false,"pushed_at":"2022-09-16T02:52:29.000Z","size":80,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-01T17:22:13.862Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@logustra/vinscroll","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/logustra.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"logustra","ko_fi":"logustra","custom":"https://trakteer.id/logustra/tip"}},"created_at":"2022-05-21T10:25:30.000Z","updated_at":"2024-02-03T23:09:14.000Z","dependencies_parsed_at":"2022-09-21T13:41:23.307Z","dependency_job_id":null,"html_url":"https://github.com/logustra/vinscroll","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logustra%2Fvinscroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logustra%2Fvinscroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logustra%2Fvinscroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logustra%2Fvinscroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logustra","download_url":"https://codeload.github.com/logustra/vinscroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841217,"owners_count":20356446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T07:23:45.809Z","updated_at":"2026-01-03T10:09:44.315Z","avatar_url":"https://github.com/logustra.png","language":"Vue","funding_links":["https://github.com/sponsors/logustra","https://ko-fi.com/logustra","https://trakteer.id/logustra/tip"],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"## Vinscroll\n\n[![Codecov](https://img.shields.io/codecov/c/github/logustra/vinscroll)](https://codecov.io/github/logustra/vinscroll?branch=master)\n[![Downloads](https://img.shields.io/npm/dm/@logustra/vinscroll)](https://npmcharts.com/compare/@logustra/vinscroll?minimal=true)\n[![Version](https://img.shields.io/npm/v/@logustra/vinscroll)](https://www.npmjs.com/package/@logustra/vinscroll)\n[![Gzip Size](https://img.badgesize.io/https://unpkg.com/@logustra/vinscroll/dist/index.umd.js?compression=gzip)](https://unpkg.com/@logustra/vinscroll/dist/index.umd.js)\n[![License](https://img.shields.io/github/license/logustra/vinscroll)](https://github.com/logustra/vinscroll/blob/master/license.md)\n[![Code Style](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli)\n\n\u003e A minimalist infinite scroll component for vue 2-3\n\n## Getting Started\n### NPM\n\n```shell\nnpm install @logustra/vinscroll\n```\n\nTo make `@logustra/vinscroll` work for Vue 2, you need to have `@vue/composition-api` installed.\n\n```shell\nnpm install @vue/composition-api\n```\n\n### CDN\nDrop `\u003cscript\u003e` inside your HTML file.\n\nVue 3\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3.2.31\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@logustra/vinscroll\"\u003e\u003c/script\u003e\n```\n\nVue 2\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@2.6.14\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@vue/composition-api@1.4.9\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@logustra/vinscroll\"\u003e\u003c/script\u003e\n```\n\n## Usage\n### Setup\nVue 3\n```js\nimport { createApp } from 'vue'\nimport Vinscroll from '@logustra/vinscroll'\nimport App from './app.vue'\n\nconst app = createApp(App)\napp.use(Vinscroll)\n```\n\nVue 2\n```js\nimport Vue from 'vue'\nimport CompositionAPI from '@vue/composition-api'\nimport Vinscroll from '@logustra/vinscroll'\n\nVue.use(CompositionAPI)\nVue.use(Vinscroll)\n```\n\n### Basic Usage\n```html\n\u003ctemplate\u003e\n  \u003cvinscroll\n    @load:more=\"onLoadMore\"\n  \u003e\n    \u003cdiv\n      v-for=\"item in items\"\n      :key=\"item\"\n    \u003e\n      {{ item }}\n    \u003c/div\u003e\n  \u003c/vinscroll\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ref } from 'vue'\nexport default {\n  setup() {\n    const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n\n    function onLoadMore() {\n      const length = items.value.length + 1\n      items.value.push(...Array.from({ length: 5 }, (_, index) =\u003e length + index))\n    }\n\n    return { \n      items,\n      onLoadMore \n    }\n  },\n}\n\u003c/script\u003e\n```\n[Demo →](https://stackblitz.com/edit/vitejs-vite-x1g4ac?file=src%2Fcomponents%2FbasicUsage.vue)\n\n### In Element\n```html\n\u003ctemplate\u003e\n  \u003cVinscroll\n    :element=\"elScroll\"\n    @load:more=\"onLoadMore\"\n  \u003e\n    \u003cdiv\n      ref=\"elScroll\"\n      style=\"height: 200px; overflow: auto;\"\n    \u003e\n      \u003cdiv\n        v-for=\"item in items\"\n        :key=\"item\"\n      \u003e\n        {{ item }}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/Vinscroll\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ref } from 'vue'\nexport default {\n  setup() {\n    const elScroll = ref(null)\n    const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n\n    function onLoadMore() {\n      const length = items.value.length + 1\n      items.value.push(...Array.from({ length: 5 }, (_, index) =\u003e length + index))\n    }\n\n    return {\n      elScroll,\n      items,\n      onLoadMore,\n    }\n  },\n}\n\u003c/script\u003e\n```\n[Demo →](https://stackblitz.com/edit/vitejs-vite-x1g4ac?file=src%2Fcomponents%2FinElement.vue)\n\n## API\n### Props\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| element | `HTMLElement` | `null` | The HTML of the scrollable element | \n\n### Events\n| Name | Listen to | Description |\n|------|-----------|-------------|\n| load:more | `@load:more` | Emitted after the scroll has arrived at the bottom | \n\n## Cheers me on\nLove my works? give me 🌟 or cheers me on here 😆 \u003cbr\u003e\nYour support means a lot to me. It will help me sustain my projects actively and make more of my ideas come true. \u003cbr\u003e\nMuch appreciated! ❤️ 🙏\n\n\u0026nbsp; \u0026nbsp; 🐙 [Github](https://github.com/sponsors/logustra)\u003cbr\u003e\n\u0026nbsp; \u0026nbsp; 🌍 [Ko-Fi](https://ko-fi.com/logustra)\u003cbr\u003e\n\u0026nbsp; \u0026nbsp; 🇮🇩 [Trakteer](https://trakteer.id/logustra/tip)\u003cbr\u003e\n\n## License\nMIT License © 2022 Faizal Andyka","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogustra%2Fvinscroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogustra%2Fvinscroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogustra%2Fvinscroll/lists"}