Skip to content
🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now
Get help on Slack

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.

Get started for freeExplore the demo

Was this answer helpful?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
In the tutorial, there is samples of what the API returns as JSON. Is there a way to view these ?Jan 11, 2021
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
Handling dynamic meta titles and descriptions in SanityFeb 25, 2021
Examples of customized dashboards/admin pages and the queryable feature of Portable Text.May 1, 2020
has anyone figured out a way to sort lists of content in the studio? i'd love a drag and drop if possibleJan 13, 2021
How to view and delete images using the media pluginSep 14, 2020
Tips for localizing the rich text editor in Sanity.io using a custom localeBlock type.May 14, 2020
Hello all! I’m trying to render a code block in a Portable Text Block, followed the instructions to add the serializer and...Feb 3, 2021
Discussion about configuring Sanity and Nuxt, using the nuxt-sanity module, and resolving issues with fetching data.Aug 21, 2020
is there a good solution to center or right align text in the richtext editor?Dec 3, 2020

Related contributions

Turbo Start Sanity
Template

Featured

The battle-tested Sanity template that powers Roboto Studio's websites

Schema UI - Next.js Sanity Starter
Template

Featured

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko

The Swaddle
Made with Sanity

Featured

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar