Vue-b-slot NPM

vue-b-slot

what

some useful tooling for dealing w/ slot

why

I find it very frustrating that we can't iterate on children from templating. For sure, we can do a lot with v-for or the render(h) function, but there are some common usecases in between which won't fit directives and where render() is overkill.

how

I tried to build separate directives for each functionality (to encourage modularity) but directives cannot be used on <slot /> and/or functional components, so the initial goal to write <slot v-limit="5" /> was loss from the beginning ; also, there is no way to keep order within directive treatment which could result in a complicated use…

Instead, I'm proposing a functional component along with vue-fragments for a most-transparent DOM-wise implementation, at the cost of a slightly verbose use (basically <b-slot><slot /></b-slot>).

My only wish is that we could automatically bind the <slot /> of a component to go in some prefered places, so it would be more auto-magic (like, writing <b-slot /> would be resolved to <b-slot><slot /></b-slot> because of an hypothetical canBeUsedToReceiveSlot: 'default' property in b-slot component definition)

use

download the package npm i -s vue-b-slot
install dependencies npm i

And there you go :

import BSlot from 'vue-b-slot'

export const MyTop5s = {
  components: { BSlot },
  template: '<ol>
    <b-slot :limit="5" :wrap="li"><slot /></b-slot>
  </ol>
  '
}

Components properties :

foreach : Function : callback function to iterate on children vnodes (useful to set properties).
type : String : a simple check on tag name, so you can control children passed to your component easily.
filter : Function : a more powerful way to check on your children with a callback.
limit : uint : will trim the number of children.
wrap : String : will wrap the children around a given wrap element (useful for li)