Propsify

This does the opposite of slotify. It turns all the slots of a component into props.

Basic Example

Given a component that takes in it's content from it's slots, propsify can make it take in the content from the props.

App.vue

<script setup lang="ts">
import {propsify} from "vue-slotify"
import Badge from "./Badge.vue"
import SlotsCard from "./SlotsCard.vue"

const PropsifiedCard = slotify(SlotsCard) 
</script>

<template>
  <PropsifiedCard
    title="Card title"
    body="Hello <strong>World</strong>!"
    :footer="'<small>Card footer</small>'"
  />
</template>

SlotsCard.vue

<script setup lang="ts">
defineSlots<{
  title: () => any
  body: () => any
  footer: () => any
}>()
</script>

<template>
  <div class="card">
    <h3><slot name="title" /></h3>
    <div><slot name="body" /></div>
    <div><slot name="footer" /></div>
  </div>
</template>

Output

Card title

Hello World!

Card footer

slotToProp Example

propsify accepts a function as its second parameter. It is used to get the slot to forward to, based on the prop name. This is useful when working with existing components from other packages.