Custom directive: [Vue warn]: Failed to resolve directive

I use vue3 with nuxt3 and have a custom directive

/plugins/animateOnScroll.client.js
`
const options = {
root: null,
rootMargin: ‘50px’,
threshold: .3
}

const scrollSlideUpObserver = new IntersectionObserver(
(entries, scrollSlideUpObserver) => {
entries.forEach(entry => {

  // If element is in view
  if (entry.isIntersecting) {
    // Add class 'scroll-up'
    entry.target.classList.add('scroll-up')
    // Unobserve element
    // scrollSlideUpObserver.unobserve(entry.target)
  } else {
    // Remove class 'scroll-up'
    entry.target.classList.remove('scroll-up')
  }
})

}, options
)

const scrollSlideLeftObserver = new IntersectionObserver(
(entries, scrollSlideLeftObserver) => {
entries.forEach(entry => {

  // If element is in view
  if (entry.isIntersecting) {
    // Add class 'scroll-up'
    entry.target.classList.add('scroll-left')
    // Unobserve element
    // scrollSlideLeftObserver.unobserve(entry.target)
  } else {
    // Remove class 'scroll-up'
    entry.target.classList.remove('scroll-left')
  }
})

}, options
)

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.directive(‘scroll-slide-up’, {
beforeMount: (el, binding) => {
// Add ‘before-scroll-up’ class
el.classList.add(‘before-scroll-up’)
// Observe element
scrollSlideUpObserver.observe(el)
}
});

nuxtApp.vueApp.directive('scroll-slide-left', {
    beforeMount: (el, binding) => {
        // Add 'before-scroll-up' class
        el.classList.add('before-scroll-left')
        // Observe element
        scrollSlideLeftObserver.observe(el)
    }
});

});

`

if I run the app i get this error:

[Vue warn]: Failed to resolve directive: scroll-slide-left [nitro] [dev] [unhandledRejection] TypeError: Cannot read property 'getSSRProps' of undefined

How can I fix this?