How to use <slot/> as the root element of a Vue component?

652 views Asked by At

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?

0

There are 0 answers