IntersectionObserver doesn't work while using nuxt-link

Question

I use IntersectionObserver to add a class whenever a element is visible so I can add a fade-in/out animation in my nuxt project. It work well but if I change the page with nuxt-link (or go back to the same page) IntersectionObserver doesn't add the class (so everything is opacity: 0)

Here is the Intersection observer script in my main nuxt layout (default.vue)

mounted() {

  const animate = document.querySelectorAll('.animate');

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('in')
      } else {
        entry.target.classList.remove('in')
      }
    })
  }, {
   rootMargin: '-15px',
  })

  animate.forEach(entry => {
    observer.observe(entry);
  });

},

I would like this code to run everytime I change page with nuxt-link

Answer 1

I just implemented IntersectionObserver on Nuxt pages, not layouts and just tested that - it worked fine.

I have a feeling that Nuxt is doing something with layouts where the component is kept-alive and not re-mounted, but the observer is being shut off for some reason.

I haven't tested this, but I'd imagine you could set up a watcher for this.$route.name within the layout.

When this watcher is triggered, you can bind the observer.

Make sure to set immediate:true so it runs on first render.

Something like this:

computed: {
    routeName() {
        return this.$route.name;
    }
},

watch: {
  routeName: {
    immediate: true,
    handler() {
      // Bind observer here
    },
  },
},

This should give you a starting point. You may need to also manually dispose of the observer to make sure there's no duplicates. Perhaps you can check somehow if the observer is set, then only initialise a new one if it isn't.

It may also be possible to do a deep watcher on purely the $route object itself.