diff --git a/README.md b/README.md index 29d5dc58..0622d42f 100644 --- a/README.md +++ b/README.md @@ -127,7 +127,97 @@ The simplest way is by using the `useStoryblok` one-liner composable. Where you Check the available [apiOptions](https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/stories/retrieve-one-story?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) in our API docs and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) passed to the Storyblok Bridge. -#### Rendering Rich Text +### Rendering Rich Text + +You can render rich-text fields by using the `SbRichText` component: + +```html + + + +``` + +#### Overriding the default resolvers + +You can override the default resolvers by passing a `resolver` prop to the `SbRichText` component, for example, to use vue-router links or add a custom codeblok component: : + +```html + + + +``` + +Or you can have more control by using the `useRichText` composable: + +```html + + + +``` + +For more incredible options you can pass to the `useSbRichText, please consult the [Full options](https://github.com/storyblok/richtext?tab=readme-ov-file#options) documentation. + +### Legacy Rich Text Resolver + +> [!WARNING] +> The legacy `richTextResolver` is soon to be deprecated. We recommend migrating to the new `useRichText` composable described above instead. You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/vue` and a Vue computed property: