Advanced
Create Block Components
how to create your own Nuxt Components to render Gutenberg Blocks
By default every GutenBerg block will be rendered with the WPNuxt component EditorBlock, which is merely outputting the renderedHtml in a p tag:
<script setup lang="ts">
import type { EditorBlock } from '#wpnuxt/blocks'
defineProps<{
block: EditorBlock
}>()
</script>
<template>
<p v-html="block.renderedHtml" />
</template>
Add your own components
WPNuxt allows you to add a Nuxt component to render any Gutenberg block by merely creating a component with the name of the Gutenberg block
Example component to render a CoreButton block using a Nuxt UI button:
<script setup lang="ts">
import type { CoreButton } from '#wpnuxt/blocks'
defineProps<{
block: CoreButton
}>()
</script>
<template>
<UButton
:label="block.attributes.text"
:to="block.attributes.url"
/>
</template>
More examples can be found in the WPnuxt demo