Nuxt3 / Vue3 Support

[fanckush]

I'm currently unable to register the renderer as a plugin in a Nuxt3 project, I think it's not yet supported right? I currently get the following error

it looks like the v3 is meant for that, does it currently work?

[fanckush]

For anyone looking into using this with Vue3 / Nuxt3 I found a way. after looking at the code base I got it to work. I would not use this in production but at least it works

1. install V3 version

yarn add @marvr/storyblok-rich-text-vue-renderer@next

2. Define Nuxt Plugin in the ~/plugins/ directory

import { useNuxtApp } from '#app'
import {
  plugin,
  defineResolvers,
} from '@marvr/storyblok-rich-text-vue-renderer'
import BaseTooltip from '@/components/BaseTooltip.vue'

export default () => {
  useNuxtApp().vueApp.use(
    plugin({
     // optional if you have custom SB components that you want to map to Vue components
      resolvers: defineResolvers({
        components: {
          SB_COMP_NAME: ({ fields }) =>
            h(BaseTooltip, { prop1: fields.name, prop2: fields.color ... }, fields.text),
        },
      }),
    })
  )
}

That's It, now you can use the <RichTextRenderer> component with the response document object you get from SB like so:

<template>
...
<RichTextRenderer :document="response.richText" />
...
</template>

<script setup>
import { RichTextRenderer } from '@marvr/storyblok-rich-text-vue-renderer'
...
</script>

Thanks for the library, it works really well! 🙏

[m4rvr]

@fanckush Hey, sorry for the late response! Currently, there is no Vue 3 support and I haven't found time to make it production ready yet. Like you've already written, there is the v3 branch and next tag. Great that it works now for you.

[fanckush]

@MarvinRudolph Yes it works very well! just one thought, why re-introduce the p tag inside list items? it was great that the v2 version omitted the <p> 😄

[m4rvr]

@MarvinRudolph Yes it works very well! just one thought, why re-introduce the p tag inside list items? it was great that the v2 version omitted the <p> 😄

Are you sure in the v2 it was omitted because I only render what Storyblok gives and Storyblok always wraps the text inside list items with <p> afaik? 🤔

[fanckush]

You're right, I just looked at the implementation again, I initially thought the p is omitted in v2

[m4rvr]

You're right, I just looked at the implementation again, I initially thought the p is omitted in v2

But good point still. That could be an option though!

[fanckush]

That would be really helpful. I've added this to the plugin options for now:

 // remove p tag
list_item: ({ children }) => {
  if (children.length === 1 && children[0].type === 'p') {
    // @ts-ignore
    return h('li', children[0].children)
  }
  return h('li', children)
},

[m4rvr]

@fanckush Have a look here, it's implemented now in the new v3 (not fully tested yet and just a first idea). https://github.com/MarvinRudolph/storyblok-rich-text-renderer/commit/e2f51c19322352c529ff131c0465172750afdb48

A new omitParagraphInListItems in the plugin was added, so feel free to set it to true. 🤗