On gists

Expose Slots From a Child Component

Vue.js

ThirdPartyComponent.vue Raw #

<template>
    <slot name="header" :header="header"> header {{ header }}</slot>
    <slot :default="default"> default {{  default }}</slot>
    <slot name="footer" :footer="footer"> footer {{ footer }}</slot>
</template>

<script>
export default {
    data() {
        return {
            header: 'Header value',
            default: 'Default value',
            footer: 'Footer value',
        };
    },
};
</script>

Wrapper.vue Raw #

<template>
    <div class="wrapper">
        <ThirdPartyComponent v-bind="$attrs">
            <!-- Expose all slots of the third-party component -->
            <template v-for="(_, name) in $slots" #[name]="slotProps">
                <slot :name="name" v-bind="slotProps || {}"></slot>
            </template>
        </ThirdPartyComponent>
    </div>
</template>

<script setup>
import ThirdPartyComponent from './ThirdPartyComponent.vue';
</script>

App.vue Raw #

  <Wrapper>
        <template #header="{ header }"> Header changed from parent -> {{ header }} </template>
    </Wrapper>