createRootDirective()
createRootDirective(
handle):Directive<HTMLElement>
Defined in: vue/directives.ts:35
Attach the engine to the container. Sets display: grid unless you set an
inline display, and marks the element with data-riffle-root. Server
rendering does the same, so the root is already a grid before hydration.
In a render function the server keeps an inline display of your own; a
compiled template’s server render does not show the directive your
binding, so there it always emits display: grid.
If you also bind a style to the root, include display: grid in it:
Vue’s development hydration check compares the element’s style only with
your binding, so a grid added by the directive alone is reported as a
mismatch. The Riffle component does this for you.
Parameters
Section titled “Parameters”handle
Section titled “handle”Returns
Section titled “Returns”Directive<HTMLElement>
Example
Section titled “Example”import { createRootDirective } from '@rpxl/riffle/vue'
const vRiffleRoot = createRootDirective(handle)// in a render function: withDirectives(h('div'), [[vRiffleRoot]])