Vuetify: use carousel to display components

Question

The response to this issue says:

The slot is missing from the docs, you can already do this.

Can someone provide a toy example or explanation of how to do this? To clarify, what I want is to import components (eg. A.vue, B.vue, C.vue) into another (eg. Carousel.vue), then display said components in a carousel. Something along the lines of:

<template>
  <v-carousel>
    <v-carousel-item v-for="(component, i) in components"></v-carousel-item>
  </v-carousel>
</template>

<script>
  import A from '@/components/A'
  import B from '@/components/B'
  import C from '@/components/C'

  export default {
    components: {
      A,
      B,
      C
  }
</script>

Answer 1

Issue says if you include your components properly, you can just put them inside v-carousel e.g.

<v-carousel>
     <your-custom-component/>
</v-carousel>

Or inside v-carousel-item also

<v-carousel-item>
    <v-btn>Hi</v-btn>
</v-carousel-item>

---

I've received a down-vote for unknown reason, so I'll presume it wasn't clear enough, thus extended explanation follows.

In order to make <your-custom-component/> work inside <v-carousel> top level component inside <your-custom-component/> must be v-carousl-item:

// YourCustomComponent.vue
<template>
    <v-carousl-item>
    // ...
    </v-carousl-item>
</template>

(That is unless something has changed in subsequent versions of vuetify)

Answer 2

Well, if you are OK with dropping the carousel requirement, then you may want to take a look at v-window. It provides exactly what you are asking for.