Portable text

Access text, images, and other media with Nuxt and the Sanity headless CMS.

Global helper

This module defines a global <SanityContent> component that can turn portable text into HTML. It is a lightweight functional component without an instance. It has been designed to be functionally equivalent to sanity-blocks-vue-component while addressing some of its shortfalls.

Example

<template>
  <SanityContent :blocks="content" />
</template>

Local import

You may wish to import SanityContent only in the components that need it if you have disabled the global contentHelper option. Note that you will need to provide your projectId (and dataset if not production):

Example

<template>
  <SanityContent :blocks="content" :serializers="serializers"  />
</template>

<script>
import { SanityContent } from '@nuxtjs/sanity/dist/components/sanity-content'
import CustomBlockComponent from '~/components/CustomBlockComponent.vue'

export default {
  components: { SanityContent },
  data: () => ({
    // This is optional
    serializers: {
      types: {
        // This can be an imported vue component 
        customBlock: CustomBlockComponent,
        // or a dynamic import
        dynamicBlock: () => import('~/components/DynamicCustomBlockComponent.vue'),
      },
      marks: {
        // You can also just pass a string for a custom serializer
        // if it's a registered component or HTML element
        internalLink: 'a'
      }
    }
  })
}
</script>

Other resources