Documentation / @ripl/vue / RiplContext

Variable: RiplContext

const RiplContext: RiplComponent<RiplContextProps, Context<Element, Record<string, unknown>>>

Defined in: adapters/vue/src/components/context.ts:111

Creates a Ripl rendering context and provides it to its subtree, mounting the canvas into its own root element.

The context is built during setup() against a detached host, which Vue attaches on mount. That ordering is deliberate: setup() runs top-down, so every descendant — scene, renderer, elements — finds a live context in its own setup() rather than having to wait for a mount hook that Vue would run bottom-up, after theirs.

Elements declared without a scene between them and this component are painted directly, so the simplest useful tree is a context and a shape.

Example

<ripl-context>
    <ripl-circle :cx="50" :cy="50" :radius="20" fill="#f00"/>
</ripl-context>