Contentful Rich Text Vue Renderer

Common errors

• [Vue warn]: Failed to resolve component: RichTextRenderer

  cause 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

  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.
  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.

  cause 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.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• breaking 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.
  Fix: Ensure your project uses Node.js 10 or higher when working with `contentful-rich-text-vue-renderer@2.x.x`.
• gotcha 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.
  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`.

Install

• npm install contentful-rich-text-vue-renderer npm
• yarn add contentful-rich-text-vue-renderer yarn
• pnpm add contentful-rich-text-vue-renderer pnpm

Imports

• RichTextRenderer
  wrong:

  const RichTextRenderer = require('contentful-rich-text-vue-renderer');

  correct:

  import RichTextRenderer from '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
  wrong:

  import h from 'vue';

  correct:

  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
  wrong:

  import { BLOCKS, MARKS } from 'contentful-rich-text-vue-renderer';

  correct:

  import { BLOCKS, MARKS } from '@contentful/rich-text-types';

  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.

Quickstart

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>