Merge pull request #20 from paramander/vue3

Upgrade to vue 3 component

Author: tolgap

.github/workflows/nodejs.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [12.x, 14.x, 16.x, 18.x]
 
     steps:
     - uses: actions/checkout@v1

README.md

@@ -1,8 +1,12 @@
 # rich-text-vue-renderer
 
-Vue renderer for the Contentful rich text field type.
+Vue 3 renderer for the Contentful rich text field type.
 
-## Version 2.x dropped support for Node 8. If you need Node 8 support, remain on 1.x!
+## Version 2.x is for Vue 2 support.
+
+## Changelog
+
+See releases page for changelog of versions.
 
 ## Installation
 
@@ -98,6 +102,7 @@ You can also pass custom renderers for both marks and nodes as an optional param
 
 ```html
 <script>
+import { h } from "vue";
 import { BLOCKS, MARKS } from '@contentful/rich-text-types';
 import RichTextRenderer from 'contentful-rich-text-vue-renderer';
 
@@ -132,12 +137,12 @@ export default {
   methods: {
     renderMarks() {
       return {
-        [MARKS.BOLD]: (text, key, h) => h('custom-bold', { key: key }, text)
+        [MARKS.BOLD]: (text, key) => h('custom-bold', { key }, text)
       };
     },
     renderNodes() {
       return {
-        [BLOCKS.PARAGRAPH]: (node, key, h, next) => h('custom-paragraph', { key: key }, next(node.content, key, h, next))
+        [BLOCKS.PARAGRAPH]: (node, key, next) => h('custom-paragraph', { key }, next(node.content, key, next))
       }
     };
   }
@@ -154,6 +159,7 @@ Last, but not least, you can pass a custom rendering component for an embedded e
 
 ```html
 <script>
+import { h } from "vue";
 import { BLOCKS } from '@contentful/rich-text-types';
 import RichTextRenderer from 'contentful-rich-text-vue-renderer';
 
@@ -171,8 +177,8 @@ const document = {
 
 // Example function to render an embedded entry in a RichText editor.
 // For instance, a react-router link to an entry.
-const customEmbeddedEntry = (node, key, h) => {
-  return h('Link', { key: key, to: 'link to embedded entry' }, 'content for the <Link> component');
+const customEmbeddedEntry = (node, key) => {
+  return h('Link', { key, to: 'link to embedded entry' }, 'content for the <Link> component');
 };
 
 export default {