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