How to override a resolver on v3

[alvarosabu]

Hi there,

I need to override a Resolver for NodeTypes.CODE_BLOCK to add a component with a specific class no-prose and Highlight it with Prism.

So following the config options I'm trying like this:

import { plugin } from '@marvr/storyblok-rich-text-vue-renderer'
import { NodeTypes } from '@marvr/storyblok-rich-text-types'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(
    plugin({
      resolvers: {
        components: {
          [NodeTypes.CODE_BLOCK]: ({ children, attrs }) => h('pre', attrs, h('code', { class: "no-prose" } , children)),
        },
      },
    }),
  )
})

But I get an Invalid vnode type when creating vnode: undefined.

How can I add a custom component for the resolver?

Thanks

[westberliner]

Hi,

just for documentation's sake. I guess you already got this:

import { plugin } from '@marvr/storyblok-rich-text-vue-renderer'
import { NodeTypes } from '@marvr/storyblok-rich-text-types'
import { defaultResolvers } from '@marvr/storyblok-rich-text-vue-renderer';

defaultResolvers[NodeTypes.CODE_BLOCK] = ({ children, attrs }) => h('pre', attrs, h('code', { class: "no-prose" } , children)),

const resolvers = {
  ...defaultResolvers,
  components: {
     SomeCustomVueComponentIfAny
  }
};

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(
    plugin({
      resolvers
    }),
  )
})

Components are for Vue components.