vue-forward-slots's Introduction

Vue Forward Slots

Need to forward slots to a child component? This package makes it easy to forward slots to a child component.

No more need for iterating over slots and passing them down to child components!

With vue forward slots 🚀

<script setup>
import MyComponent from '@/Components/MyComponent.vue'
import { ForwardSlots } from 'vue-forward-slots'
</script>

<template>
    <ForwardSlots>
        <MyComponent/> <!-- Slots will now be forwarded to MyComponent -->
    </ForwardSlots>
</template>

Old way 💩

<script setup>
import MyComponent from '@/Components/MyComponent.vue';

...

</script>

<template>
    <MyComponent>
        <template v-for="(index, name) in $slots" v-slot:[name]="data">
            <slot :name="name" v-bind="data"/>
        </template>
    </MyComponent>
</template>

Installation

npm install vue-forward-slots

Usage

Import the Component

<script setup>
import { ForwardSlots } from 'vue-forward-slots'
</script>

Forward All Slots (Except Default)

<template>
    <ForwardSlots>
        <MyComponent/>
    </ForwardSlots>
</template>

Forward Single Slot

<template>
    <ForwardSlots slot="slotname">
        <MyComponent/>
    </ForwardSlots>
</template>

Forward Specific Slots

<template>
    <ForwardSlots :slot="['slot-one', 'slot-two']">
        <MyComponent/>
    </ForwardSlots>
</template>

Forward All Slots Except Some

<template>
    <ForwardSlots :exclude="['default', 'slot-two']">
        <MyComponent/>
    </ForwardSlots>
</template>

Forward All Slots Including Default

<template>
    <ForwardSlots :exclude="[]">
        <MyComponent/>
    </ForwardSlots>
</template>

Props

Prop	Type	Description	Default Value
`slot`	Array, String	Specifies slot names to forward, either as a string or an array. If omitted, all slots are forwarded (except those in `exclude`).	`[]`
`exclude`	Array, String	Specifies slot names not to forward, either as a string or an array. The `default` slot is always excluded by default.	`['default']`

Recommend Projects