Nuxt•2mo ago

Nuxt Content suddenly stopped working

After I tried to solve the

Using <NuxtLayout> inside app.vue will cause unwanted layout shifting in your application. Consider removing <NuxtLayout> from app.vue and using it in your pages.

error, my content pages stopped working... I cannot get them working again. Also my application is so slow to start now, even small updates result in long nuxt reloads. I have to split this up, as its too long for discord .-.

1 Reply

ggggggggg•2mo ago

Here is my about page (/pages/about.vue):

<template>
  <article class="prose prose-pre:bg-base-300 prose-a:link-hover max-w-none">
    <ContentDoc v-slot="{ doc }">
      <div class="flex flex-col md:grid grid-cols-4 gap-8">
        <div v-if="doc.toc" class="col-span-1 md:border-r no-prose">
          <aside class="sticky top-3">
            <div class="mb-2 text-xl font-semibold">Table of Contents</div>
            <nav>
              <TocList :links="doc.body?.toc?.links" :activeId="activeId" />
            </nav>
          </aside>
        </div>
        <ContentRenderer :value="doc" class="col-span-3" />
      </div>
    </ContentDoc>
  </article>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';

const activeId = ref('basic-syntax');

onMounted(() => {
  let timeoutId: number | null = null;

  const callback = (entries: IntersectionObserverEntry[]) => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = window.setTimeout(() => {
          activeId.value = entry.target.id;
        }, 100);
        break;
      }
    }
  };

  const observer = new IntersectionObserver(callback, {
    root: null,
    threshold: [0.5, 0.75, 1.0],
  });

  const elements = document.querySelectorAll('h2, h3');

  for (const element of elements) {
    observer.observe(element);
  }

  onBeforeUnmount(() => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    for (const element of elements) {
      observer.unobserve(element);
    }
  });
});
</script>

<template>
  <article class="prose prose-pre:bg-base-300 prose-a:link-hover max-w-none">
    <ContentDoc v-slot="{ doc }">
      <div class="flex flex-col md:grid grid-cols-4 gap-8">
        <div v-if="doc.toc" class="col-span-1 md:border-r no-prose">
          <aside class="sticky top-3">
            <div class="mb-2 text-xl font-semibold">Table of Contents</div>
            <nav>
              <TocList :links="doc.body?.toc?.links" :activeId="activeId" />
            </nav>
          </aside>
        </div>
        <ContentRenderer :value="doc" class="col-span-3" />
      </div>
    </ContentDoc>
  </article>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';

const activeId = ref('basic-syntax');

onMounted(() => {
  let timeoutId: number | null = null;

  const callback = (entries: IntersectionObserverEntry[]) => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = window.setTimeout(() => {
          activeId.value = entry.target.id;
        }, 100);
        break;
      }
    }
  };

  const observer = new IntersectionObserver(callback, {
    root: null,
    threshold: [0.5, 0.75, 1.0],
  });

  const elements = document.querySelectorAll('h2, h3');

  for (const element of elements) {
    observer.observe(element);
  }

  onBeforeUnmount(() => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    for (const element of elements) {
      observer.unobserve(element);
    }
  });
});
</script>

And my markdown equiavalant of it (/content/about.md):

---
toc: true
---

# About the Project

---
toc: true
---

# About the Project

My app.vue:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Routing is made only using <RouterLink />. It frustates me, as I've put a lot of work into the project already... I've also already tried nuxt cleanup && nuxt prepare a lot... Didn't solve anything. Another thing is that I also run into this error as well: Error: ENOENT: no such file or directory, access '\\.\pipe\nitro\worker-16772-1.sock'.

Gaming

Programming

Nuxt Content suddenly stopped working