https://github.com/rameel/vue-pagelock
A simple utility for managing page scroll locking within Vue applications. No external dependencies.
https://github.com/rameel/vue-pagelock
page-locking pagelock scroll-lock scroll-locking
Last synced: 11 months ago
JSON representation
A simple utility for managing page scroll locking within Vue applications. No external dependencies.
- Host: GitHub
- URL: https://github.com/rameel/vue-pagelock
- Owner: rameel
- License: mit
- Created: 2024-01-29T22:41:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-09T15:34:41.000Z (about 1 year ago)
- Last Synced: 2025-06-26T06:05:26.052Z (11 months ago)
- Topics: page-locking, pagelock, scroll-lock, scroll-locking
- Language: JavaScript
- Homepage:
- Size: 53.7 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue-Pagelock
The `@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.
Uses [@ramstack/pagelock](https://github.com/rameel/pagelock) under the hood.
## Installation
### Using via NPM
```sh
npm install --save @ramstack/vue-pagelock
```
### using via CDN
```html
const app = Vue.createApp({
setup() {
}
});
// Register the pagelock plugin
app.use(PagelockPlugin);
app.mount("#app");
```
### Using the ES module build
```html
import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
import { PagelockPlugin } from "https://cdn.jsdelivr.net/npm/@ramstack/vue-pagelock@1/dist/vue-pagelock.esm.min.js";
const app = createApp({
setup() {
}
});
// Register the pagelock plugin
app.use(PagelockPlugin);
app.mount("#app");
```
## Usage examples
After installation, register the plugin at the application-wide level.
```js
import App from "./App";
import { createApp } from "vue";
import { PagelockPlugin } from "@ramstack/vue-pagelock";
const app = createApp(App);
app.use(PagelockPlugin);
app.mount("#app");
```
Or directly import the directive into the desired components.
```vue
Show modal
X
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent ac commodo justo, sit amet pellentesque nunc.
Vivamus sit amet porttitor quam, nec dictum magna.
Vestibulum mollis magna vel justo consectetur, vel viverra nisl maximus.
Sed luctus, massa sit amet fermentum aliquet, erat tortor luctus diam,
et commodo sem ante ut ante. Aenean rhoncus tellus vel est feugiat,
at sagittis nisl finibus. Praesent elementum, risus ut congue ultricies,
nisi tortor pretium magna, in cursus metus nisl sed dolor.
Phasellus sit amet velit ante. Nulla odio arcu, pretium sed ante nec,
tempor fringilla nisl.
import { ref } from "vue";
import { vPagelock } from "@ramstack/vue-pagelock";
const isOpen = ref(false);
function show(): void {
isOpen.value = true;
};
function hide(): void {
isOpen.value = false;
};
```
## License
This package is released under the **MIT License**.