{"id":14991035,"url":"https://github.com/paramander/contentful-rich-text-vue-renderer","last_synced_at":"2025-08-20T18:32:46.453Z","repository":{"id":36378166,"uuid":"165057522","full_name":"paramander/contentful-rich-text-vue-renderer","owner":"paramander","description":"Render Contentful Rich Text field using Vue","archived":false,"fork":false,"pushed_at":"2023-10-18T05:19:19.000Z","size":1066,"stargazers_count":38,"open_issues_count":5,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-23T20:53:48.904Z","etag":null,"topics":["contentful","rich-text-editor","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/contentful-rich-text-vue-renderer","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paramander.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-10T12:37:38.000Z","updated_at":"2024-06-18T18:13:48.915Z","dependencies_parsed_at":"2024-06-18T18:13:38.743Z","dependency_job_id":"a239d5aa-a05b-4513-be74-8730a276ae34","html_url":"https://github.com/paramander/contentful-rich-text-vue-renderer","commit_stats":{"total_commits":78,"total_committers":10,"mean_commits":7.8,"dds":0.6282051282051282,"last_synced_commit":"c5f36b7941c6c9354d45fa6537032771cb1df450"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paramander%2Fcontentful-rich-text-vue-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paramander%2Fcontentful-rich-text-vue-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paramander%2Fcontentful-rich-text-vue-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paramander%2Fcontentful-rich-text-vue-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paramander","download_url":"https://codeload.github.com/paramander/contentful-rich-text-vue-renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229786945,"owners_count":18123998,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["contentful","rich-text-editor","vue"],"created_at":"2024-09-24T14:21:21.283Z","updated_at":"2025-08-20T18:32:46.416Z","avatar_url":"https://github.com/paramander.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rich-text-vue-renderer\n\nVue 3 renderer for the Contentful rich text field type.\n\n## Version 2.x is for Vue 2 support.\n\n## Changelog\n\nSee releases page for changelog of versions.\n\n## Installation\n\nUsing [npm](http://npmjs.org/):\n\n```sh\nnpm install contentful-rich-text-vue-renderer\n```\n\nUsing [yarn](https://yarnpkg.com/):\n\n```sh\nyarn add contentful-rich-text-vue-renderer\n```\n\n## Usage\n\n```html\n\u003cscript\u003e\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 world!',\n          marks: [],\n        },\n      ],\n    },\n  ],\n};\n\nexport default {\n  data() {\n    return {\n      document\n    };\n  }\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cRichTextRenderer :document=\"document\" /\u003e\n\u003c/template\u003e\n\u003c!-- Will render in Vue as -\u003e \u003cp :key=\"key\"\u003eHello world!\u003c/p\u003e --\u003e\n```\n\n```html\n\u003cscript\u003e\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};\n\nexport default {\n  data() {\n    return {\n      document\n    };\n  }\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cRichTextRenderer :document=\"document\" /\u003e\n\u003c/template\u003e\n```\n\nYou can also pass custom renderers for both marks and nodes as an optional parameter like so:\n\n```html\n\u003cscript\u003e\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};\n\nexport default {\n  data() {\n    return {\n      document\n    };\n  },\n\n  methods: {\n    renderMarks() {\n      return {\n        [MARKS.BOLD]: (text, key) =\u003e h('custom-bold', { key }, text)\n      };\n    },\n    renderNodes() {\n      return {\n        [BLOCKS.PARAGRAPH]: (node, key, next) =\u003e h('custom-paragraph', { key }, next(node.content, key, next))\n      }\n    };\n  }\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cRichTextRenderer :document=\"document\" :nodeRenderers=\"renderNodes()\" :markRenderers=\"renderMarks()\" /\u003e\n\u003c/template\u003e\n\u003c!-- Will render in Vue as -\u003e \u003ccustom-paragraph :key=\"key\"\u003e\u003ccustom-bold :key=\"key\"\u003eHello\u003c/custom-bold\u003e\u003cu :key=\"key\"\u003e world!\u003c/u\u003e\u003c/custom-paragraph\u003e --\u003e\n```\n\nLast, but not least, you can pass a custom rendering component for an embedded entry:\n\n```html\n\u003cscript\u003e\nimport { h } from \"vue\";\nimport { BLOCKS } from '@contentful/rich-text-types';\nimport RichTextRenderer from 'contentful-rich-text-vue-renderer';\n\nconst document = {\n  nodeType: 'document',\n  content: [\n    {\n      nodeType: 'embedded-entry-block',\n      data: {\n        target: (...)Link\u003c'Entry'\u003e(...);\n      },\n    },\n  ]\n};\n\n// Example function to render an embedded entry in a RichText editor.\n// For instance, a react-router link to an entry.\nconst customEmbeddedEntry = (node, key) =\u003e {\n  return h('Link', { key, to: 'link to embedded entry' }, 'content for the \u003cLink\u003e component');\n};\n\nexport default {\n  data() {\n    return {\n      document\n    }\n  },\n\n  methods: {\n    renderNodes() {\n      return {\n        [BLOCKS.EMBEDDED_ENTRY]: customEmbeddedEntry\n      }\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cRichTextRenderer :document=\"document\" :nodeRenderers=\"renderNodes()\" /\u003e\n\u003c/template\u003e\n\u003c!-- Will render as -\u003e \u003ccustom-component :key=\"key\"\u003e(...)Link\u003c'Entry'\u003e(...)\u003c/custom-component\u003e --\u003e\n```\n\nThe `nodeRenderers` prop should be one of the following `BLOCKS` and `INLINES` properties as defined in [`@contentful/rich-text-types`](https://www.npmjs.com/package/@contentful/rich-text-types):\n\n- `BLOCKS`\n  - `DOCUMENT`\n  - `PARAGRAPH`\n  - `HEADING_1`\n  - `HEADING_2`\n  - `HEADING_3`\n  - `HEADING_4`\n  - `HEADING_5`\n  - `HEADING_6`\n  - `UL_LIST`\n  - `OL_LIST`\n  - `LIST_ITEM`\n  - `QUOTE`\n  - `HR`\n  - `EMBEDDED_ENTRY`\n  - `EMBEDDED_ASSET`\n  - `TABLE`\n  - `TABLE_ROW`\n  - `TABLE_CELL`\n  - `TABLE_HEADER_CELL`\n\n- `INLINES`\n  - `EMBEDDED_ENTRY` (this is different from the `BLOCKS.EMBEDDED_ENTRY`)\n  - `HYPERLINK`\n  - `ENTRY_HYPERLINK`\n  - `ASSET_HYPERLINK`\n\nThe `markRenderers` prop should be one of the following `MARKS` properties as defined in [`@contentful/rich-text-types`](https://www.npmjs.com/package/@contentful/rich-text-types):\n\n- `BOLD`\n- `ITALIC`\n- `UNDERLINE`\n- `CODE`\n- `SUBSCRIPT`\n- `SUPERSCRIPT`\n- `STRIKETHROUGH`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparamander%2Fcontentful-rich-text-vue-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparamander%2Fcontentful-rich-text-vue-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparamander%2Fcontentful-rich-text-vue-renderer/lists"}