Registry / web-framework / contentful-rich-text-vue-renderer

contentful-rich-text-vue-renderer

JSON →
library3.2.1jsnpmunverified

The `contentful-rich-text-vue-renderer` package, currently at stable version 3.2.1, provides a robust solution for rendering Contentful Rich Text fields within Vue 3 applications. It parses the Contentful Rich Text JSON structure and converts it into native Vue components, allowing for seamless integration of rich content. The library is actively maintained with regular patch and minor releases, as evidenced by recent updates fixing warnings and adding support for new marks. A key differentiator is its direct compatibility with Vue 3's composition API and rendering functions (e.g., `h`), while older 2.x versions supported Vue 2. It requires `@contentful/rich-text-types` as a peer dependency, which defines the expected structure of the rich text document and its various node and mark types. This package simplifies displaying rich content managed in Contentful without needing to manually parse and render complex JSON structures. Releases typically include dependency updates and new feature support for rich text marks/nodes.

web-frameworkcrm-productivity
npm install contentful-rich-text-vue-renderer
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · CONTENTFUL-RICH-TE
C
contentful-rich-text-vue-renderer
web-frameworkjavascriptv3.2.1
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

RichTextRenderer
✓ import RichTextRenderer from 'contentful-rich-text-vue-renderer';
✗ const RichTextRenderer = require('contentful-rich-text-vue-renderer');
The library primarily ships as an ES Module. Direct CommonJS require is not recommended, especially for Vue 3 usage.
h
✓ import { h } from 'vue';
✗ import h from 'vue';
`h` is a named export from Vue 3 and is crucial for creating VNodes in custom renderers. It is not a default export.
BLOCKS, MARKS
✓ import { BLOCKS, MARKS } from '@contentful/rich-text-types';
✗ import { BLOCKS, MARKS } from 'contentful-rich-text-vue-renderer';
These constants are provided by the peer dependency `@contentful/rich-text-types`, not directly by the renderer package itself. Ensure `@contentful/rich-text-types` is installed.

This example demonstrates how to render a Contentful Rich Text document, including custom renderers for bold marks and paragraphs, and a placeholder for an embedded entry block. It uses Vue 3's Composition API `<script setup>`.

<script setup> import { h } from 'vue'; import { BLOCKS, MARKS } from '@contentful/rich-text-types'; import RichTextRenderer from 'contentful-rich-text-vue-renderer'; const document = { nodeType: 'document', content: [ { nodeType: 'paragraph', content: [ { nodeType: 'text', value: 'Hello', marks: [{ type: 'bold' }] }, { nodeType: 'text', value: ' world!', marks: [{ type: 'italic' }] } ] }, { nodeType: 'embedded-entry-block', data: { target: { sys: { id: 'some-entry-id', type: 'Link', linkType: 'Entry' } } }, content: [] } ] }; const renderMarks = () => ({ [MARKS.BOLD]: (text, key) => h('strong', { key, style: { color: 'blue' } }, text) }); const renderNodes = () => ({ [BLOCKS.PARAGRAPH]: (node, key, next) => h('p', { key, class: 'custom-paragraph' }, next(node.content, key, next)), [BLOCKS.EMBEDDED_ENTRY]: (node, key) => h('div', { key, class: 'embedded-content' }, `Embedded Entry: ${node.data.target.sys.id}`) }); </script> <template> <RichTextRenderer :document="document" :nodeRenderers="renderNodes()" :markRenderers="renderMarks()" /> </template>
Debug
Known issues
breakingVersion 3.0.0 introduced breaking changes by migrating the renderer to support Vue 3. Projects using Vue 2 must remain on `contentful-rich-text-vue-renderer` versions 2.x.x.
fix
For Vue 3 projects, upgrade to `^3.0.0`. For Vue 2 projects, ensure `contentful-rich-text-vue-renderer@2.x.x` is used and avoid upgrading to version 3.
affects: >=3.0.0
gotchaIn versions prior to 3.2.1, the `RichTextRenderer` component might emit 'extraneous non-props attributes' warnings in Vue 3 due to attributes being passed down without explicit handling.
fix
Upgrade to version 3.2.1 or newer to resolve the extraneous non-props attributes warning. If upgrading is not possible, explicitly disable attribute inheritance for the component or use `$attrs` if you need to pass attributes through.
affects: >=3.0.0 <3.2.1
breakingVersion 2.0.0 of this library (for Vue 2 projects) dropped support for Node.js 8. While not directly affecting Vue 3, it's a historical breaking change for older Node.js environments.
fix
Ensure your project uses Node.js 10 or higher when working with `contentful-rich-text-vue-renderer@2.x.x`.
affects: >=2.0.0
gotchaThe library depends on `@contentful/rich-text-types` as a peer dependency. Failure to install it, or a version mismatch outside the specified range (`^16.5.0 || ^17.0.0`), can lead to runtime errors or build failures.
fix
Ensure `@contentful/rich-text-types` is explicitly installed in your project and matches the peer dependency range. Use `npm install @contentful/rich-text-types@^17.0.0` or `yarn add @contentful/rich-text-types@^17.0.0`.
affects: >=3.0.0
Errors
Common errors & fixes
[Vue warn]: Failed to resolve component: RichTextRenderer
The `RichTextRenderer` component was not correctly imported or registered in your Vue component.
fix
Ensure you have `import RichTextRenderer from 'contentful-rich-text-vue-renderer';` at the top of your script and that the component is registered (e.g., within the `components` option or automatically via `<script setup>`).
TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.h) is not a function
This error typically occurs when `h` is imported incorrectly from Vue (e.g., as a default import) or if you are using an older Vue 2 project structure with a Vue 3-targeted library.
fix
Verify that your project is configured for Vue 3 and that `h` is imported as a named export: `import { h } from 'vue';`. Also, ensure you are on `contentful-rich-text-vue-renderer@3.x.x`.
npm ERR! ERESOLVE unable to resolve dependency tree ... contentful-rich-text-vue-renderer@3.2.1 requires a peer of @contentful/rich-text-types@^16.5.0 || ^17.0.0 but none was installed.
The peer dependency `@contentful/rich-text-types` is missing or its version does not satisfy the requirements of the renderer package.
fix
Install the required peer dependency: `npm install @contentful/rich-text-types@^17.0.0` or `yarn add @contentful/rich-text-types@^17.0.0`. Adjust the version as needed to match the acceptable range.
Upgrade
Version history
3.2.1latest on npm
Audit
Dependencies
@contentful/rich-text-typesrequiredDefines the Rich Text document structure and provides constants (BLOCKS, MARKS) used for custom rendering logic.
Agent activity
36 hits · last 30 days
node
30
Bingbot
1
OpenAI (training)
1
Resources
githubhttps://github.com/paramander/contentful-rich-text-vue-renderer ↗
packagehttps://www.npmjs.com/package/contentful-rich-text-vue-renderer ↗
homepagehttps://www.contentful.com ↗
contentful-rich-text-vue-renderer — npm install contentful-rich-text-vue-renderer · libregistry