Integrated Blocks text support

[freb97]

Hello,

A while ago i created this little module: Nuxt Strapi Blocks Renderer

I was wondering if it would be possible to contribute some of the functionality here, so that the other one could be archived. I was thinking about a composable maybe?

We already have useStrapiMedia, useStrapiVersion, etc. so what about something like useStrapiBlocksText:

<script setup lang="ts">
import type { Restaurant } from '~/types'

const { find } = useStrapi()

const { data } = await find<Restaurant>('restaurants')

const Description = useStrapiBlocksText(data.attributes.description)
</script>

<template>
  <div>
    <h1>{{ data.attributes.title }}</h1>
        
    <Description />
  </div>
</template>

We could also extend the useStrapi composable:

<script setup lang="ts">
import type { Restaurant } from '~/types'

const { find, Blocks } = useStrapi()

const { data } = await find<Restaurant>('restaurants')
</script>

<template>
  <div>
    <h1>{{ data.attributes.title }}</h1>

    <Blocks :text="data.attributes.description" />
  </div>
</template>

Internally, we could provide a default implementation for each block, they already exist in the other module. The user should be able to override each block component by either:

• using a predefined magic path -> e.g. ~/components/strapi/blocks/Paragraph.vue
• configuration -> e.g. strapi: { blocks: { paths: { paragraph: '~/components/MyParagraph.vue' } } }

We should discuss what this could look like, i'm open to suggestions and of course i would like to offer implementing this feature once we scoped how / if you want it in this module.