Currently experimenting with Contentful, encountering some issues with the Rich text content field.
To customize the rendering of this block and incorporate assets and linked references in Rich text content, I am utilizing the modules '@contentful/rich-text-types' and @contentful/rich-text-html-renderer.
Upon calling getEntries in the nuxt asyncData function, the description data becomes accessible in my page component. I am using the documentToHtmlString function along with certain options.
Everything is functioning as expected, but I intend to employ a pre-existing component (Post.vue) instead of returning the template in ES6 Template Strings.
Although aware that this is achievable, navigating the JS world is still relatively new to me.
I attempted to require components/post/Post.vue, but figuring out the implementation remains challenging.
import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from "@contentful/rich-text-html-renderer"
The Vue component template where the rich text field is displayed
<section class="container">
<div class="columns">
<div class="column">
<div v-html="formatContent(description)" />
</div>
</div>
</section>
The formatContent method is invoked to make use of documentToHtmlString as shown below (it functions properly):
methods: {
formatContent(content) {
return documentToHtmlString(content, options)
}
}
Adapting documentToHtmlString with options as outlined in the documentation:
const embeddedEntryRender = (node) => {
const { data: { target: entry} } = node
const fields = entry.fields
const sys = entry.sys
// At this point
// const postComponent = require('~/components/post/Post')
return `
<div class="column is-4">
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-content">
<h3 class="title is-4">${fields.title}</h3>
<div class="subtitle is-6">${fields.description}</div>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</div> `
}
const options = {
renderNode: {
[BLOCKS.EMBEDDED_ENTRY]: (node) => embeddedEntryRender(node),
// [BLOCKS.EMBEDDED_ASSET]: (node) => `<custom-component>${customComponentRenderer(node)}</custom-component>`
}
}
No errors have been identified
--
Many thanks