PrismicRichText not displaying anything

Developing with Prismic
#1

I have the following basic page set up:

<template>
  <div v-if="blog">
    <PrismicText :field="blog.title" wrapper="h1" class="text-2xl font-bold" />
    <PrismicRichText :field="blog.body" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { PrismicDocument } from "@prismicio/types";
import { usePrismic, PrismicText } from "@prismicio/vue";
import { useRouter } from "vue-router";
import { PrismicRichText } from "@prismicio/vue";

const { client } = usePrismic();
const router = useRouter();

const blog = ref<PrismicDocument | null>(null);

async function getContent() {
  const res = await client.getByUID(
    "post",
    router.currentRoute.value.params.uid
  );
  blog.value = res.data;
  console.log(blog.value);
}

onMounted(getContent);
</script>

<style scoped></style>

The PrismicRichText isn't displaying anything though. Even though the blog.body does have content underneath. When inspecting the element in Vue Tools, I do see that the element does have the correct field:

field:Array[3]
0:Reactive
1:Reactive
2:Reactive

The title is being display just fine. What is going wrong here?

#2

Hi Boris,

Your array should contain 3 objects with type and text as values, does this work on any other pages?

Is your console giving you any warnings/errors? you may need to add the 'html-serializer' to your project.

Also have you tried a variable like below to see if it outputs correctly?

const textContent = [{
  text: 'some test content',
  type: 'paragraph'
}]

<PrismicRichText :field="textContent" />

#3

Hi Jake,
Correct, the array has 3 objects, it does not work on other pages. Also added a custom htmlSerializer does not work. When adding the variable like you mentioned, i get:

runtime-core.esm-bundler.js:557 TypeError: Cannot read properties of undefined (reading 'length')
    at textNodeSpansToTreeNodeChildren (asTree.ts:124:13)
    at nodeToTreeNode (asTree.ts:103:4)
    at asTree (asTree.ts:33:17)
    at serialize (serialize.ts:23:3)
    at asHTML (asHTML.ts:147:10)
    at ReactiveEffect.fn (PrismicRichText.ts:124:10)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at get value [as value] (reactivity.esm-bundler.js:1150:39)
    at ReactiveEffect.getter [as fn] (runtime-core.esm-bundler.js:1693:31)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)

This error does not occur when accessing the blog body.

#4

Ok hmm, what about with an empty span although the above worked fine for me.

const textContent = [{
    spans: [],
    text: 'some test content',
    type: 'paragraph'
}]

Are you able to share a reproducible copy of your repo?

#5

@jake GitHub - Bowis/prismic-issue

#6

Hi Boris,

You're trying to pass 3 slices to the Prismic RichText component, this won't work and you'll need to use the awesome Slicezone tool/component.

I've imported the Slicezone for you below. Please be aware there are no slices in your project so you'll need to create these. I've also set the textContent to work in the RichText component for a working example.

<template>
  <PrismicRichText :field="textContent" />

  <SliceZone
    v-if="blog"
    :slices="blog.body"
  />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { PrismicDocument } from "@prismicio/types";
import { usePrismic, PrismicRichText, SliceZone } from "@prismicio/vue";

const { client } = usePrismic();

const blog = ref<PrismicDocument | null>(null);

async function getContent() {
  const res = await client.getByUID(
    "post",
    "peace-on-earth-a-wonderful-wish-but-no-way"
  );
  blog.value = res.data;
  console.log(blog.value);
}

const textContent = [
  {
    spans: [],
    text: "some test content",
    type: "paragraph",
  },
];

onMounted(getContent);
</script>