{"id":29027329,"url":"https://github.com/rameel/vue-pagelock","last_synced_at":"2025-07-18T08:06:45.019Z","repository":{"id":219830626,"uuid":"750057271","full_name":"rameel/vue-pagelock","owner":"rameel","description":"A simple utility for managing page scroll locking within Vue applications. No external dependencies.","archived":false,"fork":false,"pushed_at":"2025-03-09T15:34:41.000Z","size":55,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-26T06:05:26.052Z","etag":null,"topics":["page-locking","pagelock","scroll-lock","scroll-locking"],"latest_commit_sha":null,"homepage":"","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/rameel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-29T22:41:09.000Z","updated_at":"2025-06-03T18:33:44.000Z","dependencies_parsed_at":"2025-03-09T16:24:40.368Z","dependency_job_id":"c333d581-6b69-443d-a4e2-81702789d810","html_url":"https://github.com/rameel/vue-pagelock","commit_stats":null,"previous_names":["rameel/vue-pagelock"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/rameel/vue-pagelock","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rameel%2Fvue-pagelock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rameel%2Fvue-pagelock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rameel%2Fvue-pagelock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rameel%2Fvue-pagelock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rameel","download_url":"https://codeload.github.com/rameel/vue-pagelock/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rameel%2Fvue-pagelock/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265725147,"owners_count":23817967,"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":["page-locking","pagelock","scroll-lock","scroll-locking"],"created_at":"2025-06-26T06:05:25.696Z","updated_at":"2025-07-18T08:06:44.996Z","avatar_url":"https://github.com/rameel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue-Pagelock\r\n\r\nThe `@ramstack/vue-pagelock` represents a simple utility for managing page scroll locking within Vue applications. The library weights less than 1KB, and 500 bytes when gzipped.\r\n\r\nUses [@ramstack/pagelock](https://github.com/rameel/pagelock) under the hood.\r\n\r\n## Installation\r\n\r\n### Using via NPM\r\n```sh\r\nnpm install --save @ramstack/vue-pagelock\r\n```\r\n\r\n### using via CDN\r\n```html\r\n\u003cscript src=\"https://unpkg.com/vue@3/dist/vue.global.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@ramstack/vue-pagelock@1/dist/vue-pagelock.min.js\"\u003e\u003c/script\u003e\r\n\r\n\u003cscript\u003e\r\n    const app = Vue.createApp({\r\n        setup() {\r\n        }\r\n    });\r\n\r\n    // Register the pagelock plugin\r\n    app.use(PagelockPlugin);\r\n\r\n    app.mount(\"#app\");\r\n\u003c/script\u003e\r\n```\r\n\r\n### Using the ES module build\r\n```html\r\n\u003cscript type=\"module\"\u003e\r\n    import { createApp } from \"https://unpkg.com/vue@3/dist/vue.esm-browser.js\";\r\n    import { PagelockPlugin } from \"https://cdn.jsdelivr.net/npm/@ramstack/vue-pagelock@1/dist/vue-pagelock.esm.min.js\";\r\n\r\n    const app = createApp({\r\n        setup() {\r\n        }\r\n    });\r\n\r\n    // Register the pagelock plugin\r\n    app.use(PagelockPlugin);\r\n\r\n    app.mount(\"#app\");\r\n\u003c/script\u003e\r\n```\r\n\r\n\r\n## Usage examples\r\n\r\nAfter installation, register the plugin at the application-wide level.\r\n\r\n```js\r\nimport App from \"./App\";\r\nimport { createApp } from \"vue\";\r\nimport { PagelockPlugin } from \"@ramstack/vue-pagelock\";\r\n\r\nconst app = createApp(App);\r\napp.use(PagelockPlugin);\r\napp.mount(\"#app\");\r\n```\r\n\r\nOr directly import the directive into the desired components.\r\n\r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cbutton @click=\"show\"\u003eShow modal\u003c/button\u003e\r\n\r\n  \u003cdiv v-if=\"isOpen\" class=\"modal\"\u003e\r\n    \u003cbutton @click=\"close\"\u003eX\u003c/button\u003e\r\n\r\n    \u003cdiv v-pagelock=\"isOpen\" class=\"modal__content\"\u003e\r\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n        Praesent ac commodo justo, sit amet pellentesque nunc.\r\n        Vivamus sit amet porttitor quam, nec dictum magna.\r\n        Vestibulum mollis magna vel justo consectetur, vel viverra nisl maximus.\r\n        Sed luctus, massa sit amet fermentum aliquet, erat tortor luctus diam,\r\n        et commodo sem ante ut ante. Aenean rhoncus tellus vel est feugiat,\r\n        at sagittis nisl finibus. Praesent elementum, risus ut congue ultricies,\r\n        nisi tortor pretium magna, in cursus metus nisl sed dolor.\r\n        Phasellus sit amet velit ante. Nulla odio arcu, pretium sed ante nec,\r\n        tempor fringilla nisl.\r\n    \u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript lang=\"ts\" setup\u003e\r\n  import { ref } from \"vue\";\r\n  import { vPagelock } from \"@ramstack/vue-pagelock\";\r\n\r\n  const isOpen = ref(false);\r\n\r\n  function show(): void {\r\n    isOpen.value = true;\r\n  };\r\n\r\n  function hide(): void {\r\n    isOpen.value = false;\r\n  };\r\n\u003c/script\u003e\r\n```\r\n\r\n## License\r\nThis package is released under the **MIT License**.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frameel%2Fvue-pagelock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frameel%2Fvue-pagelock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frameel%2Fvue-pagelock/lists"}