@kontent-ai/rich-text-resolver-vue

[!NOTE] This is part of the @kontent-ai/rich-text-resolver monorepo. For general information and other packages, see the main README.

Requires: @kontent-ai/rich-text-resolver and vue as peer dependencies

Vue composables and helpers for resolving Kontent.ai rich text. This package provides helper functions for resolving tables and images in Vue components, designed to work seamlessly with @portabletext/vue.

Installation

npm i --save @kontent-ai/rich-text-resolver-vue
npm i --save vue  # peer dependency (^3.5.0)

[!NOTE] This package includes @kontent-ai/rich-text-resolver-html as a dependency.

Examples

Vue Resolution

Using @portabletext/vue package with Kontent.ai-specific helpers:

<script setup>
import {
  PortableText,
  PortableTextComponentProps,
  PortableTextComponents,
  toPlainText,
} from "@portabletext/vue";
import {
  resolveTableVue as resolveTable,
  resolveImageVue as resolveImage,
  toVueImageDefault,
} from "@kontent-ai/rich-text-resolver";


const components: PortableTextComponents = {
  types: {
    image: ({ value }: PortableTextComponentProps<PortableTextImage>) =>
      resolveImage(value, h, toVueImageDefault),
    table: ({ value }: PortableTextComponentProps<PortableTextTable>) =>
      resolveTable(value, h, toPlainText),
  },
  // marks etc.
};
</script>

<template>
  <PortableText :value="props.value" :components="components" />
</template>