Vue

The @ripl/vue package lets you describe a Ripl scene as a Vue template instead of building it imperatively. Every built-in element is a component, props map onto element state, and v-if / v-for drive the graph. Compositions give you the underlying context, scene, renderer and element whenever the declarative surface is not enough.

This adapter targets @ripl/web, i.e. Canvas 2D. To draw through another backend, construct the context yourself and hand it to <ripl-context> via its context prop.

NOTE

For the full component and composition API, see the Vue API Reference.

Installation

npm install @ripl/vue

vue (3.5 or later) is a peer dependency you already have. Ripl's own packages arrive as dependencies of this one.

Quick Start

Register every component globally with the plugin:

import {
    createRipl,
} from '@ripl/vue';

import {
    createApp,
} from 'vue';

import App from './app.vue';

createApp(App).use(createRipl()).mount('#app');

Or import the components you use directly, in which case the plugin is unnecessary.

Then describe a scene. <ripl-context> renders a plain element that the canvas fills, so give it a size. Click the circle in the demo below:

Props drive the element's state, @click is an ordinary Vue listener, and wrapping the element in a <ripl-transition> animates every prop change through it.

Both casings work: <ripl-circle> and <RiplCircle> resolve to the same component, exported as RiplCircle.

The three tiers

Ripl separates the drawing surface, the scene graph and the animation loop, and the adapter keeps that separation. Each level adds capability, and every element picks up the highest one declared above it.

Template	What it adds
<ripl-context>	Elements paint directly to the surface. Pointer events and hit testing work.
+ <ripl-scene>	A hoisted, flat instruction stream: z-ordering, group clipping, efficient large graphs.
+ <ripl-renderer>	A requestAnimationFrame loop, and <ripl-transition>.

A context on its own is enough for static or lightly-updated graphics:

<template>
    <ripl-context style="width: 200px; height: 200px">
        <ripl-group fill="#e5484d">
            <ripl-circle :cx="60" :cy="60" :radius="40" />
            <ripl-rect :x="100" :y="100" :width="60" :height="60" stroke="#1e6978" />
        </ripl-group>
    </ripl-context>
</template>

Add a scene once you need z-ordering or many elements, and a renderer once you need animation. See Rendering for what each one changes.

Where to go next

• Rendering: the context, scene and renderer components
• Components: groups, the built-in components, and how props map to state
• Transitions: animating enter, update and leave
• Events: pointer and drag listeners
• Compositions: reaching the underlying Ripl objects
• Examples: a live, interactive chart built from the components above

Two companion packages extend the same surface:

• 3D: @ripl/vue-3d adds a 3D context, nine shapes, a camera and lights. The scene, renderer and transition components above drive it unchanged.
• Charts: @ripl/vue-charts turns all 25 of Ripl's chart types into components whose props are the chart's options.