Rich Text in a Nuxt project

Ecosystem Static site generators
1

Does anyone have an example of an implementation of the rich-text-html-renderer https://github.com/contentful/rich-text/tree/master/packages/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
2

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

3

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)
    };

39%20AM
Screen Shot 2019-02-27 at 10.41.39 AM.png732×1144 118 KB

1 Like
4

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" />
      </article>

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)" />
     </article>

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