{"id":21060183,"url":"https://github.com/enkot/vue-lazily","last_synced_at":"2025-05-16T00:34:03.702Z","repository":{"id":40706526,"uuid":"205879565","full_name":"enkot/vue-lazily","owner":"enkot","description":"The easiest way to lazy load your content","archived":false,"fork":false,"pushed_at":"2023-10-18T02:57:03.000Z","size":2358,"stargazers_count":9,"open_issues_count":8,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-13T21:20:56.612Z","etag":null,"topics":["api","await","component","intersection","lazy","lazyload","observer","vue"],"latest_commit_sha":null,"homepage":"https://enkot.github.io/vue-lazily/","language":"TypeScript","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/enkot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-02T14:55:11.000Z","updated_at":"2023-09-03T03:16:29.000Z","dependencies_parsed_at":"2022-09-10T00:12:48.054Z","dependency_job_id":null,"html_url":"https://github.com/enkot/vue-lazily","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/enkot%2Fvue-lazily","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enkot%2Fvue-lazily/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enkot%2Fvue-lazily/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enkot%2Fvue-lazily/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enkot","download_url":"https://codeload.github.com/enkot/vue-lazily/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254447926,"owners_count":22072755,"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":["api","await","component","intersection","lazy","lazyload","observer","vue"],"created_at":"2024-11-19T17:15:55.871Z","updated_at":"2025-05-16T00:33:58.685Z","avatar_url":"https://github.com/enkot.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Logo\" src=\"https://github.com/enkot/vue-Lazily/blob/master/static/logo.png?raw=true\" height=\"120\"/\u003e\n  \u003ch1 align=\"center\"\u003e\n    \u003cb\u003eVue\u003cfont color=\"10b981\"\u003eLazily\u003c/font\u003e\u003c/b\u003e\n  \u003c/h1\u003e\n\u003c/p\u003e\n\n[![Build Status](https://travis-ci.org/enkot/vue-lazily.svg?branch=master)](https://travis-ci.org/enkot/vue-lazily)\n[![Coverage Status](https://coveralls.io/repos/github/enkot/vue-lazily/badge.svg?branch=master)](https://coveralls.io/github/enkot/vue-lazily?branch=master)\n\u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" /\u003e\n\nThe easiest way to lazy load your content.\n\n\u003e Inspired by [vue-promised](https://github.com/posva/vue-promised), recommend to look at it if you need loading/errors handling without lazy loading.\n\n## [Demo](https://enkot.github.io/vue-lazily)\n\n## Features\n\n- ⚔️ Works for both Vue 3 and 2\n- 👁️ Loads content when it becomes visible\n- 📝 Manipulate data directly in the template\n- 📍 Slots for loading and error states\n- No dependencies.\n\n\u003e Starting from v2 The minimum supported Vue version - 2.7. If you use older version of Vue, please install previous version of this library - ^1.0.0.\n\n## Why does this library exist?\n\nUsually, on big pages, rendering all content at once can cause performance problems with big \"Time to Interactive\" or \"Largest Contentful Paint\" time, or even bigger problem if SSR used - server should render all the content before user could see the page.\n\nAnd in most cases, the user will not even scroll to that content, but must wait to it to be rendered.\n\nVueLazily solves these problems by loading data only when it becomes visible and handle loading/error state itself using slots 🙂.\n\n## Installation\n\n```sh\nyarn add vue-lazily\n```\n\nor\n\n```sh\nnpm i vue-lazily\n```\n\n## Usage\n\n### Global\n\n```js\n// Vue 2\n\nimport Vue from 'vue'\nimport VueLazily from 'vue-lazily'\n\nVue.use(VueLazily, { /* options */ })\n\n\n// Vue 3\n\nimport { createApp } from 'vue'\nimport VueLazily from 'vue-lazily'\n\nconst app = createApp(App)\napp.use(VueLazily, { /* options */ }))\n```\n\n### Local\n\n```vue\n\u003cscript\u003e\nimport { Lazily } from 'vue-lazily'\n\nexport default {\n  components: {\n    Lazily\n  }\n}\n\u003c/script\u003e\n```\n\n## Basic Example\n\nUsing url string:\n\n```vue\n\u003ctemplate\u003e\n  \u003cLazily\n    action=\"https://rickandmortyapi.com/api/character/1\"\n    #default=\"{ data: { image, name, species } }\"\n  \u003e\n    \u003cimg :src=\"image\" :alt=\"name\" /\u003e\n    \u003ch2\u003e{{ name }}\u003c/h2\u003e\n    \u003cspan\u003e{{ species }}\u003c/span\u003e\n  \u003c/Lazily\u003e\n\u003c/template\u003e\n```\n\nUsing component's method:\n\n```vue\n\u003ctemplate\u003e\n  \u003cLazily :action=\"getCharacter\" #default=\"{ data: { image, name, species } }\"\u003e\n    \u003cimg :src=\"image\" :alt=\"name\" /\u003e\n    \u003ch2\u003e{{ name }}\u003c/h2\u003e\n    \u003cspan\u003e{{ species }}\u003c/span\u003e\n  \u003c/Lazily\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    getCharacter() {\n      return fetch('https://rickandmortyapi.com/api/character/1').then(res =\u003e\n        res.json()\n      )\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nUsing slots:\n\n```vue\n\u003ctemplate\u003e\n  \u003cLazily action=\"https://rickandmortyapi.com/api/character/1\"\u003e\n    \u003ctemplate #pending\u003eLoading...\u003c/template\u003e\n    \u003ctemplate #error=\"{ error }\"\u003e{{ error.message }}\u003c/template\u003e\n    \u003ctemplate #default=\"{ data: { image, name, species } }\"\u003e\n      \u003cimg :src=\"image\" :alt=\"name\" /\u003e\n      \u003ch2\u003e{{ name }}\u003c/h2\u003e\n      \u003cspan\u003e{{ species }}\u003c/span\u003e\n    \u003c/template\u003e\n  \u003c/Lazily\u003e\n\u003c/template\u003e\n```\n\n## API Reference\n\n### options\n\n| Name    | Description                             | Type     |\n| ------- | --------------------------------------- | -------- |\n| `name`  | Component name. Defaults to `Lazily`    | `String` |\n| `props` | Props which will be passed to component | `Object` |\n\n### props\n\nAll of these props could be passed to global config as well as directly to component.\n\n| Name            | Description                                                                                                                                                                                 | Type                                          |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `action`        | Url string, method or promise for default action handler. Or anything else that could be passed to custom `actionHandler`                                                                   | `any`                                         |\n| `lazy`          | Enables lazy loading which uses Intersection Observer API under the hood. Defaults to `true`                                                                                                | `Boolean`                                     |\n| `delay`         | Delay in ms to wait before displaying the pending slot. Disabled by default, if passed `true` - defaults to `200`. If disabled - pending slot will be rendered in SSR                       | `Boolean` `Number`                            |\n| `margin`        | `rootMargin` option for IntersectionObserver class. Defaults to `0px`. See [docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) | `String`                                      |\n| `threshold`     | `threshold` option for IntersectionObserver class. Defaults to `0`. See [docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)    | `String`                                      |\n| `height`        | Height of an element that is shown before pending slot. Defaults to `0px`                                                                                                                   | `String`                                      |\n| `watch`         | Reactive value or watch function to watch changes and rerun action                                                                                                                          | `Number` `String` `Array` `Object` `Function` |\n| `actionHandler` | Custom action handler. F.e. to use custom `fetch`, `axios` or `apollo`. Gets action prop as argument                                                                                        | `Function`                                    |\n\n### slots\n\nAll slots can be used as _scoped_ or regular slots.\n\n| Name       | Description                                                                    | Scope                                       |\n| ---------  | -----------------------------------------------------------------------        | ------------------------------------------- |\n| `pending`  | Content to display while the action is pending and before delay is over        | previously resolved `data`, `observed` flag |\n| _default_  | Content to display once the action has been successfully resolved              | resolved `data`                             |\n| `error`    | Content to display if the action is rejected                                   | throwed `error`                             |\n| `combined` | Combines all slots to provide a granular control over what should be displayed                           | `context` object                            |\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://github.com/enkot/vue-Lazily/issues).\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenkot%2Fvue-lazily","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenkot%2Fvue-lazily","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenkot%2Fvue-lazily/lists"}