IntersectionObserver is not defined Vue 3 ssr

Viewed 614

Please help! Why this method works in normal build and in ssr does not work.

error: IntersectionObserver is not defined

const animatedScrollObserver = new IntersectionObserver(
  (entries, animatedScrollObserver) => {

    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('enter');
        animatedScrollObserver.unobserve(entry.target);
      }
    });
  }
);
export default boot(async ({ app }) => {
  app.directive('scrollanimation', {
    beforeMount(el) {
      el.classList.add('before-enter');
      animatedScrollObserver.observe(el);

    }
  })
})
1 Answers

IntersectionObserver is client-side API and should be only used in parts that are evaluated in a browser.

There are no reasons for animatedScrollObserver to be defined in module scope, it's not used anywhere but beforeMounted. const animatedScrollObserver = ... needs to be placed inside beforeMounted, as it's client-only lifecycle hook that isn't called on server side.

Related