Example of customRenderFunction(node, key)

[sliktrik]

Hi there, the documentation mentions the method 'customRenderFunction(node, key)' but doesnt show a working example

could you please provide a full example of how to dynamically insert the component?

[brunodeangelis]

Bump... Been trying for a couple of hours and couldn't get it working

[tolgap]

@sliktrik @brunodeangelis I hope the README is a bit more clear now.

[tolgap]

@sliktrik @brunodeangelis Can you let me know if you have it working? If yes, then we can close this issue 👍 .

[pjatx]

@tolgap I'm still really struggling with getting this to work - would love some guidance.

What does this look like in a single file component? Do you register each custom render and renderNodes as methods? I'd love to see a full example where you're using this inside a tpyical single file component. IE:

<template>
    <RichTextRenderer
      :document="$page.contentfulPage.content"
      :nodeRenderers="renderNodes"
    />
</template>

<script>
import { BLOCKS, MARKS } from '@contentful/rich-text-types'
import RichTextRenderer from 'contentful-rich-text-vue-renderer'

export default {
    components: {
        RichTextRenderer
    },
    mehods: {
         // Not sure how to make this work here per the docs
    }
}
</script>

[tolgap]

@pjatx I hope the new README is more clarifying now.

[pjatx]

@tolgap Thanks mate! much appreciated. I still can't figure out how to wrangle and render my data, but not your problem : ) I'm glad someone is trying to help the vue community!

Do you think you could point me in the right direction though? Here's an example of the data I'm getting back: https://gist.github.com/pjatx/a3fdba9d3fac30e3039a625dcb4b1e18

My hope is that I can write a custom function to render different content types to custom components.

Let's say there's a contentType called deviceCarousel. (in this example) What would be the best way to use this to render a similarly named custom component in the vue side?

Currently trying something like this but getting errors:

const customEmbeddedEntry = (node, key, h) => {
  return h('DeviceCarousel', { key: key }, 'content for the deviceCarousel component')
}

  methods: {
    renderNodes() {
      return {
        [BLOCKS.EMBEDDED_ENTRY]: customEmbeddedEntry
      }
    }
  }

<template>
    <RichTextRenderer
      :document="$page.contentfulPage.content.content"
      :nodeRenderers="renderNodes"
    />
</template>

[tolgap]

@pjatx I would really like to help you, but there could be so much wrong with your code.

What is visible for me, seems to be correct. So I'm afraid I can't help you. Your issue will be in the way you're handling the data. Please use vue-devtools to figure out what data you're passing into components.