Created
September 29, 2022 21:19
-
-
Save SebbeJohansson/31b64c5c4f914abfec2660210ec7795a to your computer and use it in GitHub Desktop.
In-Line Storyblok block rendering for Nuxt3 with SSR and Prerendering
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 = []; | |
// Proof of concept for custom handling of inline blok 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@marvr/storyblok-rich-text-vue-renderer Does this, but it hasn't been touched in a while and I'm not sure if there's a good way to set it up for Nuxt. I used it with iles but I had to register each component that could be used in it manually like this:
I'm honestly REALLY surprised there hasn't been an official library/plugin that does this at this point. It's an extremely common use case and no one has an amazing solution.