Skip to content

createCardDirective()

createCardDirective(handle): Directive<HTMLElement, number>

Defined in: vue/directives.ts:70

Register a card at the bound index. Every hook receives the element, which makes registration element-aware: Vue unmounts a removed card synchronously during patch but runs updated hooks after it, and a per-index ref callback would unregister whichever card had just moved into the slot. Server rendering emits the grid cell and data-riffle-card too, unless your own style binding sets grid-area. As with the root, if you bind a style to a card, include grid-area: 1 / 1 in it to keep Vue’s development hydration check quiet.

AdapterHandle

Directive<HTMLElement, number>

import { createCardDirective } from '@rpxl/riffle/vue'
const vRiffleCard = createCardDirective(handle)
// in a render function: withDirectives(h('div'), [[vRiffleCard, index]])