Note that there is no actual "list" node type in the Portable Text specification, but a series of list item blocks with the same level and listItem properties will be grouped into a virtual one inside of this library.

`ts
const components = {
list: {
// Ex. 1: customizing common list types
bullet: (_, { slots }) => h('ul', { class: 'mt-xl' }, slots.default?.()),
number: (_, { slots }) => h('ol', { class: 'mt-lg' }, slots.default?.()),

// Ex. 2: rendering custom lists
checkmarks: (_, { slots }) => h('ol', { class: 'm-auto text-lg' }, slots.default?.()),
},
};
`

The list property can also be set to a single Vue component, which would handle lists of _any_ type.

$3

Object of Vue components used to render different list item styles. The object has the shape {listItemType: VueComponent}, where listItemType is the value set in individual listItem attributes on blocks.

`ts
const components = {
listItem: {
// Ex. 1: customizing common list types
bullet: (_, { slots }) =>
h('li', { style: { listStyleType: 'disclosure-closed' } }, slots.default?.()),

// Ex. 2: rendering custom list items
checkmarks: (_, { slots }) => h('li', ['✅', slots.default?.()]),
},
};
`

The listItem property can also be set to a single Vue component, which would handle list items of _any_ type.

$3

Component to use for rendering "hard breaks", eg \n inside of text spans.

Will by default render a
. Pass false to render as-is (\n)

$3

Vue component used when encountering a mark type there is no registered component for in the components.marks prop.

$3

Vue component used when encountering an object type there is no registered component for in the components.types prop.

$3

Vue component used when encountering a block style there is no registered component for in the components.block prop. Only used if components.block is an object.

$3

Vue component used when encountering a list style there is no registered component for in the components.list prop. Only used if components.list is an object.

$3

Vue component used when encountering a list item style there is no registered component for in the components.listItem prop. Only used if components.listItem is an object.

Disabling warnings / handling unknown types

When the library encounters a block, mark, list or list item with a type that is not known (eg it has no corresponding component in the components property), it will by default print a console warning.

To disable this behavior, you can either pass false to the onMissingComponent property, or give it a custom function you want to use to report the error. For instance:

`vue



`

Rendering Plain Text

This module also exports a function (toPlainText()) that will render one or more Portable Text blocks as plain text. This is helpful in cases where formatted text is not supported, or you need to process the raw text value.

For instance, to render a meta description for a page:

`ts
import { toPlainText } from '@portabletext/vue';

// Imported from @unhead/vue
useHead({
meta: [{ name: 'description', value: toPlainText(myPortableTextData) }],
});
`

Or to generate element IDs for headers, in order for them to be linkable:

`ts
import { PortableText, toPlainText, PortableTextComponents } from '@portabletext/vue';
import slugify from 'slugify';

const LinkableHeader = ({ value }, { slots }) => {
// value is the single Portable Text block of this header
const slug = slugify(toPlainText(value));
return h('h2', { id: slug }, slots.default?.());
};

const components: PortableTextComponents = {
block: {
h2: LinkableHeader,
},
};
`

Typing Portable Text

Portable Text data can be typed using the @portabletext/types package.

$3

Use PortableTextBlock without generics for loosely typed defaults.

`ts
import { PortableTextBlock } from '@portabletext/types';

interface MySanityDocument {
portableTextField: (PortableTextBlock | SomeBlockType)[];
}
`

$3

PortableTextBlock supports generics, and has the following signature:

`ts
interface PortableTextBlock<
M extends PortableTextMarkDefinition = PortableTextMarkDefinition,
C extends TypedObject = ArbitraryTypedObject | PortableTextSpan,
S extends string = PortableTextBlockStyle,
L extends string = PortableTextListItemType,
> {}
`

Create your own, narrowed Portable text type:

`ts
import {
PortableTextBlock,
PortableTextMarkDefinition,
PortableTextSpan,
} from '@portabletext/types';

// MARKS
interface FirstMark extends PortableTextMarkDefinition {
_type: 'firstMark';
// ...other fields
}

interface SecondMark extends PortableTextMarkDefinition {
_type: 'secondMark';
// ...other fields
}

type CustomMarks = FirstMark | SecondMark;

// INLINE BLOCKS

interface MyInlineBlock {
_type: 'myInlineBlock';
// ...other fields
}

type InlineBlocks = PortableTextSpan | MyInlineBlock;

// STYLES

type TextStyles = 'normal' | 'h1' | 'myCustomStyle';

// LISTS

type ListStyles = 'bullet' | 'myCustomList';

// CUSTOM PORTABLE TEXT BLOCK

// Putting it all together by specifying generics
// all of these are valid:
// type CustomPortableTextBlock = PortableTextBlock
// type CustomPortableTextBlock = PortableTextBlock
// type CustomPortableTextBlock = PortableTextBlock
type CustomPortableTextBlock = PortableTextBlock;

// Other BLOCKS that can appear inbetween text

interface MyCustomBlock {
_type: 'myCustomBlock';
// ...other fields
}

// TYPE FOR PORTABLE TEXT FIELD ITEMS
type PortableTextFieldType = CustomPortableTextBlock | MyCustomBlock;

// Using it in your document type
interface MyDocumentType {
portableTextField: PortableTextFieldType[];
}
``

Credits