Vue Slotify

Appearance

Getting Started ​

Install ​

sh
npm install -D vue-slotify
sh
yarn add -D vue-slotify
sh
pnpm add -D vue-slotify
sh
bun add -D vue-slotify

Example ​

vue
<template>
  <component :is="slotify(PropsCard)">
    <template #title>Card title</template>

    <template #body>
      Hello <Badge type="warning">World</Badge>!
    </template>

    <template #footer>
      <small>Card footer</small>
    </template>
  </component>
</template>
vue
<script setup lang="ts">
import './style.css'

defineProps<{
  title: string
  body: string
  footer: string
}>()
</script>

<template>
  <div class="card">
    <h3 v-html="title" />
    <div v-html="body" />
    <div v-html="footer" />
  </div>
</template>
vue
<template>
  <component
    :is="propsify(SlotsCard)"
    title="Card title"
    body="Hello <strong>World</strong>!"
    :footer="'<small>Card footer</small>'"
  />
</template>
vue
<script setup lang="ts">
import './style.css'

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>