Unlock seamless workflows and faster delivery with our latest releases – get the details

Nuxt.JS - How to Render Body Text Using the Portable Text Helper

3 replies
Last updated: Apr 5, 2021
Hi all, I'm a beginner developer here trying to create my first blog on Sanity using Nuxt. I am having a horrific time trying to render body text using the Portable text helper for the npm package @nuxtjs/sanity. Is there a full working example somewhere someone can point me to? I would be tremendously grateful and indebted to this community, thank you so much.
Apr 2, 2021, 1:08 AM
Hi and welcome, Michael. Have you taken a look at the Nuxt event template ?
Apr 2, 2021, 1:29 AM
You can install sanity-blocks-vue-component (https://github.com/rdunk/sanity-blocks-vue-component ) then in your nuxt.config.js put in the plugin like so
plugins: [
    "@/plugins/sanity-blocks.js"
  ],
Then in your component you
import sanity from "../../sanityClient" in the script. Then you can use the block component:
<block-content :blocks="child" v-for="child in missionFirstParagraph" :key="child._id" /> 
In this example,
missionFirstParagraph is the potable text that I'm pulling from sanity that I want to display in paragraph form.
I found this site to be helpful
https://developers.cloudflare.com/pages/tutorials/build-a-blog-using-nuxt-and-sanity
Also there is a Nuxt channel in here that you should search for. Sometimes questions in Help get lost among all the different stuff, but in the Nuxt channel I've found people are really quick to respond and really helpful.
Apr 2, 2021, 1:40 AM
Ok thank you for your help! I didn't realize there was a Nuxt channel. I was able to use the cloudflare tutorial previously but that uses the sanity-blocks-vue-component and I was looking for a way to do it with just with @nuxtjs/sanity . Also the cloudflare tutorial and the nuxt events template use version 0.1.0 of sanity-blocks-vue-compondent and I was trying to implement the 1.0 version which has breaking changes I believe. Regardless though, I will stick with what works for now and appreciate your help!
Apr 5, 2021, 2:43 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?