Using slots

[jrean]

Hi,

I'm trying to define a "DefaultModal" component including different slots. Then I want to create another component that will be injected into the "DefaultModal".. I tried the following:

  const { open } = useModal({
    component: DefaultModal,
    attrs: {
    },
    slots: {
      default: useModalSlot({
        component: Foo,
        attrs: {
        }
      }),
    },
  })

Then DefaultModal.vue:

<template>
  <VueFinalModal>
    <div class="modal-card">
      <header v-if="$slots.head" class="modal-card-header">
        <slot name="head" />
      </header>

      <section v-if="$slots.default" class="modal-card-body">
        <slot />
      </section>

      <footer v-if="$slots.footer" class="modal-card-footer">
        <slot name="footer" />
      </footer>
    </div>
  </VueFinalModal>
</template>

<script setup lang="ts">
import { VueFinalModal } from 'vue-final-modal';
</script>

Then Foo.vue:

<template>
  <template v-slot:head>
    <p>Head Content...</p>
  </template>

  <div class="content">
    <p>Default slot content...</p>
  </div>
</template>

<script setup lang="ts">
</script>

It's obviously not working. Is it even possible? If yes, what am I missing? Thxs

[jrean]

Actually I just found. If it can be useful for somebody:

• Define a base modal BaseModal.vue:

  
  <template>
  <VueFinalModal>
  <slot />
  </VueFinalModal>
  </template>

- Create the first (default) modal template `DefaultModal.vue`:

- Create the first modal `Foo.vue`:

Then:

const { open } = useModal({ component: BaseModal, attrs: { }, slots: { default: useModalSlot({ component: Foo, attrs: { } }), }, })