```ts
// `components` object you'll pass to PortableText w/ optional TS definition
import { PortableTextComponents } from '@portabletext/vue';

const components: PortableTextComponents = {
marks: {
// Ex. 1: custom renderer for the em / italics decorator
em: (_, { slots }) => h('em', { class: 'text-gray-600 font-semibold' }, slots.default?.()),

// Ex. 2: rendering a custom `link` annotation
link: ({ value }, { slots }) => {
const target = (value?.href || '').startsWith('http') ? '_blank' : undefined;
return;
h(
'a',
{ href: value?.href, target, rel: target === '_blank' && 'noindex nofollow' },
slots.default?.(),
);
},
},
};
```

### `block`

An object of Vue components that renders portable text blocks with different `style` properties. The object has the shape `{styleName: VueComponent}`, where `styleName` is the value set in individual `style` attributes on blocks (`normal` being the default).

```ts
// `components` object you'll pass to PortableText
const components = {
block: {
// Ex. 1: customizing common block types
h1: (_, { slots }) => h('h1', { class: 'text-2xl' }, slots.default?.()),
blockquote: (_, { slots }) =>
h('blockquote', { class: 'border-l-purple-500' }, slots.default?.()),

// Ex. 2: rendering custom styles
customHeading: (_, { slots }) =>
h('h2', { class: 'text-lg text-primary text-purple-700' }, slots.default?.()),
},
};
```

The `block` object can also be set to a single Vue component, which would handle block styles of _any_ type.

### `list`

Object of Vue components used to render lists of different types (`bullet` vs `number`, for instance, which by default is `

` and `
`, respectively).

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.

### `listItem`

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.

### `hardBreak`

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`)

### `unknownMark`

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

### `unknownType`

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

### `unknownBlockStyle`

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.

### `unknownList`

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.

### `unknownListItem`

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

import { PortableText } from '@portabletext/vue';

const onMissingComponent = (message, options) => {
myErrorLogger.report(message, {
// eg `someUnknownType`
type: options.type,
// 'block' | 'mark' | 'blockStyle' | 'listStyle' | 'listItemStyle'
nodeType: options.nodeType,
});
};





```

## 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.

### Basic usage

Use `PortableTextBlock` without generics for loosely typed defaults.

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

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

### Narrow types, marks, inline-blocks and lists

`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

This repository is adapted from [@portabletext/react](https://github.com/portabletext/react-portabletext) which provided the vast majority of node rendering logic.

## License

MIT