Templating Rich Text with Slice Machine and Gridsome

Developing with Prismic
1

Hi,

I'm having trouble rendering slices in my gridsome project.
This is my graphql query:

<page-query>
    query Content($uid: String!, $lang: String!) {
        prismic {
            content(uid: $uid, lang: $lang) {
                title

                body {
                    ... on Prismic_ContentBodyText {
                        textBlock: primary {
                            text
                        }
                    }
                    ... on Prismic_ContentBodyImage_gallery {
                        imageGallery: fields {
                            image_captions
                            gallery_image
                        }
                    }
                    __typename
                }

                _meta {
                    lang
                    firstPublicationDate
                    alternateLanguages {
                        id
                        uid
                        lang
                    }
                }
            }
        }
    }
</page-query>

Then i loop over the body:

        <div v-for="(item, index) in content.body" :key="index">
            <div v-if="item.textBlock">
                <pre>
                    {{item.textBlock}}
                </pre>
            </div>
            <div v-if="item.imageGallery">
                <pre>
                    {{item.imageGallery}}
                </pre>
            </div>
        </div>

But then i'm lost. The output for one of the textBlocks is this:

{ "text": [ { "type": "o-list-item", "text": "sadasdasd", "spans": [] }, { "type": "o-list-item", "text": "asdasdasd", "spans": [] }, { "type": "o-list-item", "text": "asddasdas", "spans": [] }, { "type": "list-item", "text": "fsdsdfsd", "spans": [] }, { "type": "list-item", "text": "sdfsdfsdf", "spans": [] }, { "type": "list-item", "text": "sdfsdfsdf", "spans": [] }, { "type": "paragraph", "text": "", "spans": [] }, { "type": "paragraph", "text": "Text pagina", "spans": [ { "start": 5, "end": 11, "type": "strong" } ] }, { "type": "paragraph", "text": "sdfsdfsdfsdf", "spans": [ { "start": 0, "end": 12, "type": "hyperlink", "data": { "id": "X9KrbRIAACkAyuSP", "type": "content", "tags": [], "slug": "test-content", "lang": "nl-nl", "uid": "test-content", "link_type": "Document", "isBroken": false } } ] }, { "type": "image", "url": "https://images.prismic.io/slicemachine-blank/6b2bf485-aa12-44ef-8f06-dce6b91b9309_dancing.png?auto=compress,format", "alt": null, "copyright": null, "dimensions": { "width": 2048, "height": 1536 } } ] }

But how do i render this output?

3

Hey @joost,

It looks like you're outputting a Rich Text object. For Rich Text, the Prismic API doesn't output HTML. Instead, it outputs JSON containing the text content and a description of the content markup, which is what you're looking at.

We provide some utilities for rendering Prismic Rich Text, which you can read about here:

Let me know if I didn't fully answer your question, or if you need help with anything else :slight_smile:

Sam

4

Hi @samlittlefair,

Thanks for the info. I've got it working now with the prismic-vue plugin!

1 Like
5

Awesome! Let me know if you have any more questions :sunglasses:

6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.