jlanssie / wknd Goto Github PK

Thank you for this proof of concept repository.
I have a question rather than an issue.
Currently I'm using scoped slots to achieve a similar result but allowing some part of component template to come from the backend (ex: carousel items content) and be able to trigger some actions and data-binding on this slot.

<!-- template coming from carousel.html -->
<div data-vue-app="CarouselCmp">
  <carousel v-slot:default="spCarousel">
    <li v-on:click="spCarousel.onItemClicked">carousel item 1</li>
    <li>carousel item 2</li>
    <li>carousel item 3</li>
  </carousel>
</div>

<script>
// carousel.vue
export {
  // ...
  methods: {
    onItemClicked () {alert('click')}
  }
}
</script>
<template>
  <slot :onItemClicked="onItemClicked" />
</template>

// main.js
// JS code to initialize all elements with "data-vue-app" with createApp()

Do you see any way to have the template of the component produced by the backend with your approach?