Portable text

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.

If you want to use the same serializers in multiple places, consider creating your own component (e.g. <MySanityContent> which wraps SanityContent, but with your default serializers. By creating ~/components/MySanityContent.vue you should be able to use this everywhere in your app without importing it.

Example

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

Example with custom serializers

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

<script setup>
import CustomBlockComponent from '~/components/CustomBlockComponent.vue'
import { resolveComponent } from 'vue'

const serializers = {
  types: {
    // This is how to access a component registered by `@nuxt/components`
    lazyRegisteredComponent: resolveComponent('LazyCustomSerializer'),
    // A directly imported component
    importedComponent: CustomBlockComponent,
    // Example of a more complex async component
    dynamicComponent: defineAsyncComponent({
      loadingComponent: () => 'Loading...',
      loader: () => import('~/other/component.vue'),
    }),
  },
  marks: {
    // You can also just pass a string for a custom serializer if it's an HTML element
    internalLink: 'a'
  }
}
</script>

Other resources

Table of Contents