Vue Strapi Blocks Renderer screenshot

Vue Strapi Blocks Renderer

Author Avatar Theme by Niklasfjeldberg
Updated: 7 Jan 2026
52 Stars

A Vue renderer for the Strapi's Blocks rich text editor

Categories

Overview:

The Vue Strapi Blocks Renderer is a tool that allows users to easily render the content of Strapi’s new Blocks rich text editor in Vue frontend. It is based on the @strapi/blocks-react-renderer package.

Features:

  • Render content from Strapi’s Blocks rich text editor in Vue frontend
  • Install the Blocks renderer and its peer dependencies
  • Customize the renderer with custom Vue components

Installation:

To install the Vue Strapi Blocks Renderer, follow these steps:

  1. Install the Blocks renderer and its peer dependencies by running the command: npm install vue-strapi-blocks-renderer
  2. After fetching your Strapi content, use the BlocksRenderer component to render the data from a blocks attribute. Pass the array of blocks from your Strapi API to the content prop.

Summary:

The Vue Strapi Blocks Renderer is a powerful tool for rendering content from Strapi’s Blocks rich text editor in Vue frontend. With easy installation and customization options, it provides a seamless experience for integrating Strapi’s content into Vue projects.