New release: Conditional Fields

Portable Text to Vue

By ʞunp ʇɹǝdnɹ

A Vue component for rendering block content. Allows you to pass other Vue components as custom serializers.

Sanity Blocks Vue Component

NPM version NPM downloads GitHub Release Date Vue version License

A Vue component for rendering block content from Sanity.



Install

Notice: This version is a complete rewrite for Vue 3. For Vue 2, see versions <1.0.0.

$ npm i sanity-blocks-vue-component # or yarn add sanity-blocks-vue-component

Usage

Import directly into your component or view:

<template>
  <SanityBlocks :blocks="blocks" :serializers="serializers" />
</template>

<script>
import { SanityBlocks } from 'sanity-blocks-vue-component';
import CustomComponent from 'CustomComponent.vue';

export default {
  components: { SanityBlocks },
  setup() {
    const blocks = [...]; // Sanity block text
    const serializers = {
      types: {
        custom: CustomComponent,
      },
    };
    return { blocks, serializers };
  }
}
</script>

Or install globally:

import { createApp } from 'vue';
import { SanityBlocks } from 'sanity-blocks-vue-component';
import App from './App.vue';

const app = createApp(App);
app.component('sanity-blocks', SanityBlocks);
app.mount('#app');

Props

The following props can be passed to the component.

| Prop | Required | Description | Type | | ------------- | -------- | -------------------------------------------------- | ------ | | blocks | Yes | Block content retrieved from Sanity. | Array | | serializers | No | Any custom serializers you want to use. See below. | Object |

Serializers

Serializers are the functions used for rendering block content. They can be defined as a string or a Vue Component. This package comes with default serializers for rendering basic block content, you can pass a serializer prop to override or extend the defaults.

| Property | Description | | ----------- | -------------------------------------- | | types | Object of serializers for block types. | | marks | Object of serializers for marks. | | styles | Object of serializers for styles. | | list | Serializer for list containers. | | listItem | Serializer for list items. | | hardBreak | Serializer for hard breaks. |

Component Serializers

The most common use case is defining serializers for custom block types and marks, using the types and marks serializer properties. For example, if you have a block of type custom, you can add a property to the serializers.types object with the key custom and a value of the Vue component that should serialize blocks of that type.

When using a custom Vue component as a serializer, all properties of the block or mark object (excluding _key and _type) will be passed as props.

To access the data, you should define the correpsonding props in your component.

For mark serializers, you can also use slots to access the mark text or content.

License

MIT

Install command

npm i sanity-blocks-vue-component

Contributor

Categorized in

Other plugins by author