{"id":25363804,"url":"https://github.com/dinoperovic/vue-appear","last_synced_at":"2025-08-26T16:28:41.375Z","repository":{"id":34867203,"uuid":"185587819","full_name":"dinoperovic/vue-appear","owner":"dinoperovic","description":"🙈 Vue directive that helps you appear stuff as it comes into view.","archived":false,"fork":false,"pushed_at":"2023-01-03T21:42:16.000Z","size":1762,"stargazers_count":6,"open_issues_count":15,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-14T13:18:57.522Z","etag":null,"topics":["appear","reveal","scroll","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-appear","language":"JavaScript","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/dinoperovic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-08T10:52:49.000Z","updated_at":"2023-01-03T08:28:06.000Z","dependencies_parsed_at":"2023-01-15T09:45:25.809Z","dependency_job_id":null,"html_url":"https://github.com/dinoperovic/vue-appear","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinoperovic%2Fvue-appear","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinoperovic%2Fvue-appear/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinoperovic%2Fvue-appear/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinoperovic%2Fvue-appear/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinoperovic","download_url":"https://codeload.github.com/dinoperovic/vue-appear/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238921057,"owners_count":19552678,"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":["appear","reveal","scroll","vue","vuejs"],"created_at":"2025-02-14T22:39:11.570Z","updated_at":"2025-02-14T22:39:12.360Z","avatar_url":"https://github.com/dinoperovic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Appear\n\n[![Version](https://img.shields.io/npm/v/vue-appear.svg)](https://www.npmjs.com/package/vue-appear)\n[![License](https://img.shields.io/npm/l/vue-appear.svg)](https://www.npmjs.com/package/vue-appear)\n\nVue directive that helps you appear stuff as it comes into view.\n\n\u003e This is simply a helper that adds a class to your desiered elements, actual appearing should be done using CSS.\n\n\n## Quickstart\n\n### Installation\n\nInstall with your preffered package manager:\n\n```bash\nnpm install --save vue-appear\n# or\nyarn add vue-appear\n```\n\n### Setup\n\nOnce installed register the plugin with [Vue]:\n\n```js\nimport Vue from 'vue'\nimport VueAppear from 'vue-appear'\n\nVue.use(VueAppear)\n```\n\nIf you wish to override default settings you can pass in the options as a second argument:\n\n```js\nVue.use(VueAppear, {\n  immediate: false,\n  toggle: false,\n  children: false,\n  offset: 150,\n  hook: 'onEnter',\n  delay: 0,\n  class: 'appear',\n  selector: null,\n  callback: () =\u003e {}\n})\n```\n\n### Usage in templates\n\nTo make elements appear in your templates:\n\n```html\n\u003c!-- Appear once element comes into view --\u003e\n\u003cdiv v-appear\u003e\u003c/div\u003e\n\n\u003c!-- Appear immediately --\u003e\n\u003cdiv v-appear.immediate\u003e\u003c/div\u003e\n\n\u003c!-- Toggle apperance as they come into view, and leave --\u003e\n\u003cdiv v-appear.toggle\u003e\u003c/div\u003e\n\n\u003c!-- Appear children as they come into view --\u003e\n\u003cdiv v-appear.children\u003e\n  \u003ch4\u003eTitle\u003c/h4\u003e\n  \u003cp\u003eLorem ipsum dolor sin\u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- Combine modifiers as you wish --\u003e\n\u003cdiv v-appear.toggle.children\u003e\n  \u003ch4\u003eTitle\u003c/h4\u003e\n  \u003cp\u003eLorem ipsum dolor sin\u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- Pass in additional options --\u003e\n\u003cdiv v-appear=\"{\n  offset: 300,\n  delay: 300,\n  class: 'show',\n  callback: onShow,\n  enabled: isAppearEnabled\n}\"\u003e\u003c/div\u003e\n```\n\n## API Options\n\n| Setting | Description | Type | Default |\n| --- | --- | --- | --- |\n| immediate | Set if element should appear immediately, ignoring scroll. | *boolean* | false\n| toggle | Toggle element appearance when enters and leaves scroll view. | *boolean* | false\n| children | Appear element children instead. | *boolean* | false\n| offset | Offset amount before element appears. | *number* | 150\n| hook | When should element appear in relation to the view ('onEnter', 'onCenter' or 'onLeave'). | *string* | 'onEnter'\n| delay | How long should pass after page load before applying the appear class. | *number* | 0\n| class | Class to add when element appears. | *string* | 'appear'\n| selector | Query selector for children, if passed in children are appeared. | *string* | null\n| callback | Callback function when element appears or disappears, receives a boolean argument. | *function* | null\n| enabled | A boolean value that can be used to toggle the appearing. | *boolean* | true\n\n## Release notes\n\nTo see changes view the [Changelog] file.\n\n[Vue]: https://vuejs.org/\n[Changelog]: https://github.com/dinoperovic/vue-appear/blob/master/CHANGELOG.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinoperovic%2Fvue-appear","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinoperovic%2Fvue-appear","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinoperovic%2Fvue-appear/lists"}