Vue.js 3.x SPAの特定のコンポーネントのみスクロールを禁止にしたい

Question

https://t-salad.com/vue-forbidden-scroll/
上の記事を参考にmain.js内に関数を作成したのですがエラーが発生しています。恐らくvue.

前提・実現したいこと

Vue3でSPAのwebページを制作しています。
Vue.jsの特定のコンポーネントに対してスクロールを禁止にしたいです。

発生している問題・エラーメッセージ

https://t-salad.com/vue-forbidden-scroll/
上の記事を参考にmain.js内に関数を作成したのですがエラーが発生しています。

"Vue" is not defined.

該当のソースコード

import { createApp } from 'vue'
import App from './App.vue'

// イベント設定用関数
function noScroll (event) { event.preventDefault() }

// スクロール禁止
Vue.prototype.$noScroll = function () {
  // SP
  document.addEventListener('touchmove', noScroll, { passive: false })
  // PC
  document.addEventListener('mousewheel', noScroll, { passive: false })
}

// スクロール禁止を解除
Vue.prototype.$returnScroll = function () {
  // SP
  document.removeEventListener('touchmove', noScroll, { passive: false })
  // PC
  document.removeEventListener('mousewheel', noScroll, { passive: false })
}

createApp(App).mount('#app')

試したこと

色々と調べた結果、参考資料の記法はvue2の記法なのではないかと考えたのですが、具体的な解決方法を見出すに至りませんでした。

補足情報（FW/ツールのバージョンなど）

Answer 1

Vue3のドキュメントをご覧いただけますとおり、prototypeからglobalconfigに変更となっておりますので下記のような形を例にfunctionを入れ込んでいただけると良いかなと思います。

// イベント設定用関数
function noScroll (event) { event.preventDefault() }

// スクロール禁止
const noScroll = function () {
  // SP
  document.addEventListener('touchmove', noScroll, { passive: false })
  // PC
  document.addEventListener('mousewheel', noScroll, { passive: false })
}

// スクロール禁止を解除
const returnScroll = function () {
  // SP
  document.removeEventListener('touchmove', noScroll, { passive: false })
  // PC
  document.removeEventListener('mousewheel', noScroll, { passive: false })
}

const app = createApp(App)
app.provide('$noScroll', noScroll)
app.provide('$returnScroll', returnScroll)
app.mount('#app')