Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add support for slots #263

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
32 changes: 32 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,38 @@ Use `useStoryblok` in your pages to fetch Storyblok stories and listen to real-t
</template>
```

#### Using slots

You can use slots to insert slot content into the dynamic component:

```html
<script setup>
import { useStoryblok } from "@storyblok/vue";
const story = await useStoryblok("path-to-story", { version: "draft" });
</script>

<template>
<StoryblokComponent v-if="story" :blok="story.content">
<MyCustomComponent />
</StoryblokComponent>
</template>
```

And then in the dynamic component that `StoryblokComponent` uses, you can render the slot content as you would with regular Vue slots:

```html
<template>
<div>
<!-- Some content -->

<!-- The slot content MyCustomComponent will be rendered here -->
<slot></slot>

<!-- Some more content -->
</div>
</template>
```

#### Rendering Rich Text

You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/vue` and a Vue computed property:
Expand Down
2 changes: 1 addition & 1 deletion lib/StoryblokComponent.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<component :is="blok.component" v-bind="{ ...$props, ...$attrs }"></component>
<component :is="blok.component" v-bind="{ ...$props, ...$attrs }" v-slots="{ ...$slots }"></component>
</template>

<script setup lang="ts">
Expand Down