Intersection observer in a layout does not work as expected on route change

[ahoiroman]

Hello,

I am using nuxt3 with nuxt-content on a document-driven approach.

This way I got:

1. A layout-file
2. no page-file, as Nuxt-content comes with a pre-configured catch-all-route
3. My /content-directory where I store markdown-files

Within my layout, I got this:

<template>
    <div>
        <table-of-contents :active-toc-id="activeTocId" :key="route.path"/>
        <div class="building-content" ref="nuxtContent">
            <slot :key="route.path"/>
        </div>
        <nuxt-link :to="prev._path">
            {{ prev.title }}
        </nuxt-link>
        <nuxt-link :to="next._path">
            {{next.title}}
        </nuxt-link>
    </div>
</template>
<script setup lang="ts">
import {useContent} from "#imports";
import {Ref} from "vue";

const {page, prev, next} = useContent();
const route = useRoute();
const nuxtContent = ref(null);
const activeTocId: Ref<string | null> = ref(null);

const observer: Ref<IntersectionObserver | null | undefined> = ref(null);
const observerOptions = reactive({
    root: nuxtContent.value,
    threshold: 0.5,
});

onMounted(() => {
    observer.value = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            const id = entry.target.getAttribute('id');

            if (entry.isIntersecting) {
                activeTocId.value = id;
            }
        });
    }, observerOptions);

    document
        .querySelectorAll('.building-content h2[id], .building-content h3[id]')
        .forEach((section) => {
            observer.value?.observe(section);
        });
});


onUnmounted(() => {
    observer.value?.disconnect();
});
</script>

This works well - until I am clicking one of the nuxt-link. In this case, the intersection observer within the table of content does no longer work. It's just "stuck" at the position where I was when I left the page.

Refreshing the page using CTRL + R makes the intersection observer work again.

Now I am wondering: Although the onUnmounted function is being triggered clicking the nuxt-link, it seems like the intersection observer is not correctly initialized after that. Can anybody help me to understand this behavior?

[Zerro97]

Not sure if this is what's causing the issue but you can try executing your observer logic in client side:

if (process.client) {
    observer.value = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            const id = entry.target.getAttribute('id');

            if (entry.isIntersecting) {
                activeTocId.value = id;
            }
        });
    }, observerOptions);

    document
        .querySelectorAll('.building-content h2[id], .building-content h3[id]')
        .forEach((section) => {
            observer.value?.observe(section);
        });
}