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?