https://github.com/niklasfjeldberg/vue-strapi-blocks-renderer
A Vue renderer for the Strapi's Blocks rich text editor
https://github.com/niklasfjeldberg/vue-strapi-blocks-renderer
blocks renderer strapi vue
Last synced: 8 months ago
JSON representation
A Vue renderer for the Strapi's Blocks rich text editor
- Host: GitHub
- URL: https://github.com/niklasfjeldberg/vue-strapi-blocks-renderer
- Owner: niklasfjeldberg
- License: mit
- Created: 2023-12-29T09:14:50.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-02T18:44:04.000Z (over 1 year ago)
- Last Synced: 2025-01-29T08:11:14.231Z (8 months ago)
- Topics: blocks, renderer, strapi, vue
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vue-strapi-blocks-renderer
- Size: 315 KB
- Stars: 45
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Strapi Blocks Renderer
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[](https://codecov.io/gh/niklasfjeldberg/vue-strapi-blocks-renderer)
[](https://github.com/niklasfjeldberg/vue-strapi-blocks-renderer/actions/workflows/ci.yml)
Easily render the content of Strapi's new Blocks rich text editor in your Vue frontend.
Based on [@strapi/blocks-react-renderer](https://github.com/strapi/blocks-react-renderer)
- ✨ [Release Notes](/CHANGELOG.md)
- 👀 [Demo](https://reslear.github.io/vue-strapi-blocks-renderer-demo/)
- 🏀 [Online stackblitz playground](https://stackblitz.com/github/niklasfjeldberg/vue-strapi-blocks-renderer?file=src%2FApp.vue)
## Features
- No dependencies
- Utilizes Vue futures
- Custom block types and modifiers
- Works with other editors that Strapi Blocks
- Typescript support
## Installation
Install the Blocks renderer and its peer dependencies:
```sh
npm install vue-strapi-blocks-renderer vue
```
## Basic usage
After fetching your Strapi content, you can use the BlocksRenderer component to render the data from a blocks attribute. Pass the array of blocks coming from your Strapi API to the `content` prop:
```ts
import { StrapiBlocks, type BlocksContent } from 'vue-strapi-blocks-renderer';
// Content should come from your Strapi API
const content: BlocksContent = [
{
type: 'paragraph',
children: [{ type: 'text', text: 'A simple paragraph' }],
},
];
const VNode = StrapiBlocks({ content: content });
```
```html
```
Or
```ts
import { StrapiBlocks } from 'vue-strapi-blocks-renderer';
```
```html
```
## Custom components
You can provide your own Vue components to the renderer, both for blocks and modifier. They will be merged with the default components, so you can override only the ones you need.
- Blocks are full-width elements, usually at the root of the content. The available options are:
- paragraph
- heading (receives `level`)
- list (receives `format`)
- quote
- code (receives `plainText`)
- image (receives `image`)
- link (receives `url`)
- Modifiers are inline elements, used to change the appearance of fragments of text within a block. The available options are:
- bold
- italic
- underline
- strikethrough
- code
To provide your own components, pass an object to the blocks and modifiers props of the renderer. For each type, the value should be a React component that will receive the props of the block or modifier. Make sure to always render the children, so that the nested blocks and modifiers are rendered as well.
```ts
import { h } from 'vue';
import {
StrapiBlocks,
type BlocksComponents,
type ModifiersComponents,
} from 'vue-strapi-blocks-renderer';
const userBlocks: BlocksComponents = {
// Will include the class "mb-4" on all paragraphs
paragraph: (props) => h('p', { class: 'mb-4' }, props.children),
};
const userModifier: ModifiersComponents = {
// Will include the class "text-red" on all bold text
bold: (props) => h('strong', { class: 'text-red' }, props.children),
};
const VNode = StrapiBlocks({
content: content,
modifier: userModifier,
blocks: userBlocks,
});
```
[npm-version-src]: https://img.shields.io/npm/v/vue-strapi-blocks-renderer/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/vue-strapi-blocks-renderer
[npm-downloads-src]: https://img.shields.io/npm/dm/vue-strapi-blocks-renderer.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/vue-strapi-blocks-renderer
[license-src]: https://img.shields.io/npm/l/vue-strapi-blocks-renderer.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/vue-strapi-blocks-renderer