You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

vue-strapi-blocks-renderer

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-strapi-blocks-renderer

A Vue renderer for the Strapi's Blocks rich text editor. Compatible with Nuxt.


Version published
Maintainers
1
Created

Changelog

Source

v0.2.2

compare changes

🩹 Fixes

  • Lint formatting (a97fb9b)
  • Add files to lint ignore (bcc7344)
  • Prettier formatting (5424265)
  • Peerdependenci 3.4 and above (5c1d4d9)

🏡 Chore

❤️ Contributors

Readme

Source

Vue Strapi Blocks Renderer

npm version npm downloads License codecov ci

Easily render the content of Strapi's new Blocks rich text editor in your Vue frontend.

Based on @strapi/blocks-react-renderer

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:

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:

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 });
<template>
  <VNode />
</template>

Or

import { StrapiBlocks } from 'vue-strapi-blocks-renderer';
<template>
  <StrapiBlocks :content="content" :modifiers="modifiers" :blocks="blocks" />
</template>

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.

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,
});

Keywords

FAQs

Package last updated on 02 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc