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 under the hood.

Installation

Using via NPM

npm install --save @ramstack/vue-pagelock

using via CDN

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ramstack/vue-pagelock@1/dist/vue-pagelock.min.js"></script>

<script>
    const app = Vue.createApp({
        setup() {
        }
    });

    // Register the pagelock plugin
    app.use(PagelockPlugin);

    app.mount("#app");
</script>

Using the ES module build

<script type="module">
    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");
</script>

Usage examples

After installation, register the plugin at the application-wide level.

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.

<template>
  <button @click="show">Show modal</button>

  <div v-if="isOpen" class="modal">
    <button @click="close">X</button>

    <div v-pagelock="isOpen" class="modal__content">
        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.
    </div>
  </div>
</template>

<script lang="ts" setup>
  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;
  };
</script>

License

This package is released under the MIT License.