Vue component for rendering block text from Sanity
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmignore
.prettierrc
LICENSE
README.md
package-lock.json
package.json

README.md

sanity-blocks-vue-component

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

Contents

Installing

via npm

npm install --save sanity-blocks-vue-component

Add Component Globally

import BlockContent from 'sanity-blocks-vue-component'
Vue.component('block-content', BlockContent);

Basic Usage

Basic usage in a single file component, see the full example below for more detail.

<template>
  <block-content
  :blocks="blocks" 
  :serializers="serializers"
  />
</template>

<script>
import MyComponent from 'MyComponent.vue'

export default {
  data() {
    return {
      blocks : [...], // Sanity block text
      serializers: {
        types: {
          foo: MyComponent
        }
      }
    };
  }
};
</script>

Props

The following props can be passed to the component.

Prop Required Description Type
blocks Yes Block text retreived from Sanity. Array, Object
serializers No Any required custom serializers, see below for more detail. Object
className No The class applied to any container element if present. Ignored if a custom container serializer is passed. String
projectId No ID of the Sanity project. String
dataset No Name of the Sanity dataset containing the document that is being rendered. String
imageOptions No Query parameters to apply in image blocks to control size/crop mode etc. Object
renderContainerOnSingleChild No Set true to enforce a container element for single block input data. Boolean

Serializer Property

Serializers are the functions used for rendering block content. They can be defined either as a string (e.g. div) or as a Vue Component (see below for more detail). This package comes with default serializers that will work for rendering basic block content, but you may pass a serializer prop to override or extend the default serializers. The object passed will be merged with the default serializers object.

Property Description
types Object of serializers for block types.
marks Object of serializers for marks.
list Serializer for list containers.
listItem Serializer for list items.
hardBreak Serializer for hard breaks.
container Serializer for the element used to wrap the blocks.

Component Serializers

For Blocks

When using custom Vue components as block serializers, all properties of the block object will be passed via v-bind. To access the data, define the corresponding props in your component. Components will also be passed a _sanityProps prop which is an object with two properties:

  • node - the block data object.
  • options - Sanity specific options (projectId, dataset, imageOptions) passed to the root component.

This additional prop can be useful for generating image URLs using the @sanity/image-url package.

For Marks

When using custom Vue components as mark serializers, all properties of the block object will be passed via v-bind. To access the data, define the corresponding props in your component. You can use slots (e.g. this.$slots.default) to access the mark text or content.

Full Example

MainComponent.vue

<template>
  <block-content
  :blocks="blocks" 
  :serializers="serializers"
  />
</template>

<script>
// Import the component if not already added globally
import BlockContent from 'sanity-blocks-vue-component'
// Import any components to be used as serializers
import GreetingComponent from 'GreetingComponent.vue'

export default {
  components: {
    BlockContent
  },
  data() {
    return {
      // The block data will usually be retrieved from Sanity
      blocks: [
        {
          _type: 'greeting', // Sanity specific prop, corresponds to the serializer name
          _key: 'example', // Sanity specific prop
          firstname: 'Foobert', // Example custom property for this block type
          lastname: 'Barson', // Example custom property for this block type
        }
      ],
      serializers: {
        types: {
          greeting: GreetingComponent
        }
      }
    };
  }
};
</script>
GreetingComponent.vue
<template>
  <div>Hello, {{ firstname }} {{ lastname }}.</div>
</template>

<script>
export default {
  // Define the block object properties this component receives as props
  props: {
    firstname: {
      type: String,
    },
    lastname: {
      type: String,
    }
  },
}
</script>

Credits

Relies heavily on the official Sanity block-content-to-hyperscript package.

License

MIT