{"id":16316,"library":"contentful-rich-text-vue-renderer","title":"Contentful Rich Text Vue Renderer","description":"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.","status":"active","version":"3.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/paramander/contentful-rich-text-vue-renderer","tags":["javascript","contentful","richtext","rich","text","vue"],"install":[{"cmd":"npm install contentful-rich-text-vue-renderer","lang":"bash","label":"npm"},{"cmd":"yarn add contentful-rich-text-vue-renderer","lang":"bash","label":"yarn"},{"cmd":"pnpm add contentful-rich-text-vue-renderer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Defines the Rich Text document structure and provides constants (BLOCKS, MARKS) used for custom rendering logic.","package":"@contentful/rich-text-types","optional":false}],"imports":[{"note":"The library primarily ships as an ES Module. Direct CommonJS require is not recommended, especially for Vue 3 usage.","wrong":"const RichTextRenderer = require('contentful-rich-text-vue-renderer');","symbol":"RichTextRenderer","correct":"import RichTextRenderer from 'contentful-rich-text-vue-renderer';"},{"note":"`h` is a named export from Vue 3 and is crucial for creating VNodes in custom renderers. It is not a default export.","wrong":"import h from 'vue';","symbol":"h","correct":"import { h } from 'vue';"},{"note":"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.","wrong":"import { BLOCKS, MARKS } from 'contentful-rich-text-vue-renderer';","symbol":"BLOCKS, MARKS","correct":"import { BLOCKS, MARKS } from '@contentful/rich-text-types';"}],"quickstart":{"code":"<script setup>\nimport { h } from 'vue';\nimport { BLOCKS, MARKS } from '@contentful/rich-text-types';\nimport RichTextRenderer from 'contentful-rich-text-vue-renderer';\n\nconst document = {\n  nodeType: 'document',\n  content: [\n    {\n      nodeType: 'paragraph',\n      content: [\n        {\n          nodeType: 'text',\n          value: 'Hello',\n          marks: [{ type: 'bold' }]\n        },\n        {\n          nodeType: 'text',\n          value: ' world!',\n          marks: [{ type: 'italic' }]\n        }\n      ]\n    },\n    {\n      nodeType: 'embedded-entry-block',\n      data: {\n        target: { sys: { id: 'some-entry-id', type: 'Link', linkType: 'Entry' } }\n      },\n      content: []\n    }\n  ]\n};\n\nconst renderMarks = () => ({\n  [MARKS.BOLD]: (text, key) => h('strong', { key, style: { color: 'blue' } }, text)\n});\n\nconst renderNodes = () => ({\n  [BLOCKS.PARAGRAPH]: (node, key, next) => h('p', { key, class: 'custom-paragraph' }, next(node.content, key, next)),\n  [BLOCKS.EMBEDDED_ENTRY]: (node, key) => h('div', { key, class: 'embedded-content' }, `Embedded Entry: ${node.data.target.sys.id}`)\n});\n</script>\n\n<template>\n  <RichTextRenderer \n    :document=\"document\" \n    :nodeRenderers=\"renderNodes()\" \n    :markRenderers=\"renderMarks()\" \n  />\n</template>","lang":"typescript","description":"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>`."},"warnings":[{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"In 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.","severity":"gotcha","affected_versions":">=3.0.0 <3.2.1"},{"fix":"Ensure your project uses Node.js 10 or higher when working with `contentful-rich-text-vue-renderer@2.x.x`.","message":"Version 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.","severity":"breaking","affected_versions":">=2.0.0"},{"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`.","message":"The 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.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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>`).","cause":"The `RichTextRenderer` component was not correctly imported or registered in your Vue component.","error":"[Vue warn]: Failed to resolve component: RichTextRenderer"},{"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`.","cause":"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.","error":"TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.h) is not a function"},{"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.","cause":"The peer dependency `@contentful/rich-text-types` is missing or its version does not satisfy the requirements of the renderer package.","error":"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."}],"ecosystem":"npm"}