I'd like to build a wrapper component, that just adds some JavaScript to the actual component that is passed in, but without creating an extra HTML element.
This works, but creates a div as the root element:
<template>
<div v-observe-visibility="{ callback: isViewableNow, once: true }"
:class="{ 'visible animated slideInRight': showAnimation, 'invisible': !showAnimation }">
<slot/>
<div/>
</template>
I'd like something similar, without adding the div, like:
<template>
<slot v-observe-visibility="{ callback: isViewableNow, once: true }"
:class="{ 'visible animated slideInRight': showAnimation, 'invisible': !showAnimation }"/>
</template>
This, however, gives me the error:
Cannot use as component root element because it may contain multiple nodes.
Is this possible in any other way in Vue?