Not working in vue3

[madebyfabian]

So I installed as you install vue 3 plugins:

main.js:

import VScrollLock from 'v-scroll-lock'
app.use(VScrollLock)

and in the app

<div v-scroll-lock="true">

but nothing happens, the body is still scrollable. It fails silently, so no errors or anything.

[madebyfabian]

For anyone who want's to use this plugin for vue3, just implement your own by installing the body-scroll-lock dependency by yourself, then creating a src/plugins/BodyScrollLock.js file:

import { enableBodyScroll, disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'

export default {
  install: ( app, options ) => {
    app.directive('scroll-lock', {
      // On mount (inserted)
      mounted( el, binding ) {
        if (binding.value) {
          disableBodyScroll(el)
        }
      },

      updated( el, binding ) {
        if (binding.value) {
          disableBodyScroll(el)
        } else {
          enableBodyScroll(el)
        }
      },

      // On unmount (removed)
      unmounted( el ) {
        enableBodyScroll(el)
      }
    })
  },
}

and in src/main.js:

import BodyScrollLock from '@/plugins/BodyScrollLock'
app.use(BodyScrollLock)

[rick-liruixin]

body-scroll-lock They stopped the repairs. I had to do it myself, in the same way, with a new version of typeScript. And fix these problems for everyone to use. add react hooks、vue3 example

npm i body-scroll-lock-upgrade

repair log，Refer to the releases page.