Rich Text in a Nuxt project

Does anyone have an example of an implementation of the rich-text-html-renderer

in a nuxt project so far i only know vue.js and can’t figure out how to translate what the docs say to my project

1 Like

Hey rich-text-html-renderer is a framework agnostic library and also works with Nuxt.
I created a small example app with of the Rich Text rendering.
see pages/about.vue

Hey thanks for the help @sergii here’s what i have on my set up so far having trouble figuring out where i need to add

 return {
      richTextHtml: documentToHtmlString(items[0].fields.copy)

1 Like

Hello, I’ve used your example successfully, however I am now stuck as I’m using a loop to generate all my posts and can’t figure out how to render the html inside it.

So, this works:

      <article v-for="post in posts" :key="post">
        <h2>{{ post.fields.title }}</h2>
        <p>{{ post.fields.content }}</p>
        <div v-html="richTextHtml" />

But it’s obviously rendering only the latest post with

     richTextHtml: documentToHtmlString(posts.items[0].fields.text)

I tried to do something like this

     <article v-for="post in posts" :key="post">
        <div v-html="documentToHtmlString(post.fields.text)" />

but gives me errors.

I am also totally new with both Vue and Nuxt, so apologies if I’m doing something obviously wrong. Thanks!

1 Like