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. ```bash $ npm i sanity-blocks-vue-component # or yarn add sanity-blocks-vue-component ``` ## Usage Import directly into your component or view: ```vue ``` Or install globally: ```ts 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](https://v3.vuejs.org/guide/component-props.html). > **To access the data, you should define the correpsonding props in your component.** For mark serializers, you can also use [slots](https://v3.vuejs.org/guide/component-slots.html) to access the mark text or content. ## License [MIT](http://opensource.org/licenses/MIT)

Portable Text to Vue

v2 install command (deprecated)

Useful links

Contributor

ʞunp ʇɹǝdnɹ

Categorized in

Other plugins by author

Table