vue-rive v0.1.4

vue-rive

Warning:

This package actually depends on rive-js v0.7.7 package.

For the rive-js > v0.6.x versions you have to load a v7 format .riv file!

Package installation

npm i vue-rive

Simple Example

<template>
    <div>
        <rive-canvas
            canvas-id="my-canvas"
            :canvas-width="768"
            :canvas-height="768"
            rive-file-src="my_rive_v7_file_url.riv"
            :autoplay="true"
            layout-fit="cover"
            layout-alignment="center"
            artboard="home"
            :animations="['animation_1', 'animation_2']"
            @load="handleEvent"
            @loaderror="handleEvent"
            @play="handleEvent"
            @pause="handleEvent"
            @loop="handleEvent"
            @stop="handleEvent"
        />
        <button @click="riveInstance.play()">play</button>
        <button @click="riveInstance.pause()">pause</button>
        <button @click="riveInstance.stop()">stop</button>
        <button @click="riveInstance.play(['animation_1'])">first anim</button>
        <button @click="riveInstance.play(['animation_2'])">second anim</button>
    </div>
</template>

<script>
import RiveCanvas from "vue-rive";

export default {
    components: {
        RiveCanvas,
    },
    data() {
        return {
            riveInstance: null,
        };
    },
    mounted() {},
    methods: {
        handleEvent(ev, rive) {
            if (ev.type == "load") {
                this.riveInstance = rive;
            }
        },
    },
};
</script>

Getting the instance

If you want to be able to control the animation you have to get the Rive Instance from the component.

The simplest way to achieve this is to get it from the load event (as in the example).

First bind an handler to load event

@load="handleEvent"

Then store the instance reference to a variable

handleEvent(ev, rive) {
    if (ev.type == "load") {
        this.riveInstance = rive;
    }
}

The event handler

The event handler for all component events is accepting two arguments ev and rive.

• ev contains the event type and other event informations.
• rive is the rive instance.

Available Props

Available Events

Available Properties of the Rive Instance