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.


<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