NUXT 3 - Custom Component

[iD30]

Evening,

I'm trying to implement the 'Storyblok-rich-text-rederer' plugin into our project.

I have a custom component called 'button', following your documentation and reading all the raised issue responses I'm still not able to get the custom component working.

This is what I have at the moment

Plugin:

import { plugin } from "@marvr/storyblok-rich-text-vue-renderer"
import componentButton from "~/components/Button.vue";
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(plugin(), {
    resolvers: {
      components: {
        button: componentButton
      },
    }
  })
}) 

Vue:

<template>
    <div v-editable="blok" class="richtext">
        <RichTextRenderer v-if="blok" :document="blok.richtext" />
    </div>
</template>
<script setup lang="ts">
    import { RichTextRenderer } from '@marvr/storyblok-rich-text-vue-renderer'
    defineProps({ blok: Object })
</script>

The rich text editor within StoryBlok has a h1 displaying a title, a p tag displaying content and a block containing a custom button but when viewing the frontend its display the h1 and p tag and then it says component - if I remove the block within StoryBlok the word component disappears.

How do I go around making that component text to be the custom button component?

Any and all advice would be helpful as I've spent hours trying to figure this out and after trying every response from the issues raised I just cant seem to get this to working.

Thank you, Adam

[m4rvr]

Hey Adam! I don't think this plugin works with Vue 3 / Nuxt 3 since it was made for Vue 2 + Composition API plugin many months ago. I don't have a plan to continue my work on it.

There is a Vue 3 with the @next tag (https://www.npmjs.com/package/@marvr/storyblok-rich-text-vue-renderer/v/3.2.1) which you can try at least. Feel free to fork the repo.

[madebyfabian]

Hi @iD30! Do you still have this issue? I think it's because you are overriding all other resolvers. Do something like this:

import { plugin, defaultResolvers } from "@marvr/storyblok-rich-text-vue-renderer"
import componentButton from "~/components/Button.vue";
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(plugin(), {
    resolvers: {
      ...defaultResolvers,
      components: {
        button: componentButton
      },
    }
  })
}) 

Feel free to reopen if it still persists.