Skip to content
Get help on SlackWatch Sanity demo

Help with querying and displaying Portable Text blocks in Vue

15 replies
Last updated: Jan 5, 2023
Heyy, I’m stuck with the portable text in vue.. has someone a real life code example, where you query the block and give it back to the SanityBlock Component? That would help me a lot.
Jan 4, 2023, 9:52 AM
Well not in vue, but I do have some in next js (here is a guide which shows a very narrow case from schema to component), but it might help. I looked into the vue pt repo and you should be fine understanding the way PT works and then transfer your knowledge into vue instead of react 🙂
Jan 4, 2023, 10:22 AM
Jan 4, 2023, 10:22 AM
Hmm thanks, but that didn’t help.. i just want to query the full block and display it as it is in html without any custom fields in it
Jan 4, 2023, 10:27 AM
okay then you just have to check our docs, guides and blog articles (there is a lot in there), plus the vue repos ReadMe’s pretty clear as well.Unless you want some specific help on a step, I would start there
🙂
Jan 4, 2023, 10:31 AM
Okey thank you 🙂
Jan 4, 2023, 10:32 AM
Why do i need a component in the serializers function?

<template>
  <SanityBlocks :blocks="blocks" :serializers="serializers" />
</template>

<script>
import { SanityBlocks } from 'sanity-blocks-vue-component';
import CustomComponent from 'CustomComponent.vue';

export default {
  components: { SanityBlocks },
  setup() {
    const blocks = [...]; // Sanity block text
    const serializers = {
      types: {
        custom: CustomComponent,
      },
    };
    return { blocks, serializers };
  }
}
</script>

Jan 4, 2023, 10:46 AM
Isn’t there an easier way to render a basic richtext array than making a serializer for every sort of tag… that seems very complicated.. Or is there a Array to HTML plugin or something like that.. 😄
Jan 4, 2023, 11:24 AM
You only need to serialise your custom components and blocks. The rest will work out of the box
Jan 4, 2023, 11:52 AM
I would recommend reading the docs and ReadMe’s 😉
Jan 4, 2023, 11:53 AM
What is your blocker and what have you tried out?
Jan 4, 2023, 11:53 AM
I don’t quite understand how to configure the serializer. Why do I have to add a component and what does it have to look like?
Jan 4, 2023, 11:57 AM
There i query the block:
<template>
    <div :class="name">
        <SanityBlocks :block="content.impressumContent" />
    </div>
</template>

<script>
    import { SanityBlocks } from 'sanity-blocks-vue-component';
    import sanity from "../../sanity.js";

    const query = `*[_type == "impressum"]{
        impressumContent,
    }[0]
    `
    export default {
        components: { 
            SanityBlocks 
        },
        data() {
            return {
                name: 'p-impressum',
                loading: true,
                content: [],
                }
            },
        created() {
            this.fetchData();
        },
        methods: {
            fetchData() {
                this.error = this.impressum = null;
                this.loading = true;
                sanity.fetch(query).then(
                    (content) => {
                        this.loading = false;
                        this.content = content;
                    },
                    (error) => {
                        this.error = error;
                    }
                );
            }
        }
    }
</script>
And That is the Scheme of the queried document:


export default {
    name: 'impressum',
    type: 'document',
    title: 'Impressum',
    fields: [
        {
            name: 'impressumContent',
            title: 'Impressum Content',
            type: 'array',
            of: [
                {
                    type: 'block'
                },
            ]
        }
    ]
}
Jan 4, 2023, 12:12 PM
If i console.log(content.impressumContent) i get the block so the fetch worked. But the <SanityBlocks/> does nothing.. and i can’t get my head around it.
Jan 4, 2023, 12:16 PM
user J
can you find mistakes?
Jan 5, 2023, 8:27 AM
Got it. Sorry
Jan 5, 2023, 9:27 AM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?