Nuxt components inside Storyblok Rich-Text editor

[cetchells]

I saw your post here: nuxt static, really helpful.
I had a look at nuxt3 and storyblok just wondering if you got components in richtext editor to resolve in nuxt3.
Suggestions below don't seem to work
https://www.storyblok.com/tp/nuxt-components-inside-rich-text

[SebbeJohansson]

Hi @cetchells. Am i understanding it correctly that you are wondering about adding blocks using this feature?

I have not tested that. I can take a look during next week if you want?

[cetchells]

Yeh exactly that.
There is a related issue in storyblok/nuxt repo:
storyblok/storyblok-nuxt#172 (comment)
Would be great if that worked because I'm trying to migrate a wordpress site that has wp shortcodes embedded in the content.
I want to try and transform those into storyblok components.

[SebbeJohansson]

Hm okay interesting. Since i am using useStoryblokApi().richTextResolver.render(props.blok.text)) and not https://github.com/m4rvr/storyblok-rich-text-renderer (since it cant handle ssr with pretender correctly) or similar to render I would have to do it myself.

Here you can see that it completely removes the blok node:

I didn't have much time to look at this today, but I have a work in progress version:

<script setup lang="ts">
import { Richtext } from 'storyblok-js-client';

const props = defineProps({ blok: Object });
const nuxtApp = useNuxtApp();
const textObject = { ...props.blok.text };
const nodes = [];
Object.entries(textObject.content).forEach(([key, node]) => {
  if (node.type === 'blok') {
    const blok = {
      content: node.attrs?.body?.[0],
    };
    nodes.push({
      key,
      type: 'blok',
      content: {
        blok,
      },
    });
  } else {
    nodes.push({
      key,
      type: 'html',
      content: nuxtApp.$formatRichText(useStoryblokApi().richTextResolver.render({
        type: 'doc',
        content: [
          node,
        ],
      } as Richtext)),
    });
  }
});
</script>

<template>
  <div v-editable="blok" class="text">
    <div v-for="node in nodes" :key="node.key">
      <component
        :is="$resolveStoryBlokComponent(node.content.blok)"
        v-if="node.type === 'blok'"
        :blok="node.content.blok.content"
      />
      <div v-else v-html="node.content" />
    </div>
  </div>
</template>

<style>
.text img {
  max-width: 100%;
}
</style>

What I do:
I loop through all the nodes in the richtext. For each node I add it to an array representing the finished content. For the nodes that is a blok, I add it to the array with the type "blok" and for the rest (that I assume is proper richtext nodes that the resolver can handle) I add to the array with type "HTML" and I also resolve the richText right away.
This means that I get an array of each "node" that I want to render in the correct order.

The finished code does this:

Let me know if any of this was confusing. I will most likely refactor this when I have more time and add it to my finished code in production.

[SebbeJohansson]

I made a blogpost about this: https://sebbejohansson.com/blog/storyblok-richtext-in-line-block-support-for-nuxt3-with-ssr-and-prerender