Add interactive Rive animated icons to your Vue 3 or Nuxt app using the @rive-app/webgl runtime.
Add the Rive WebGL runtime from npm.
npm install @rive-app/webglUse a template ref for the canvas element and initialise Rive inside onMounted.
<template>
<canvas ref="riveCanvas" width="150" height="150" />
</template>
<script setup>
import { onMounted, ref } from "vue";
import { Rive } from "@rive-app/webgl";
const riveCanvas = ref(null);
onMounted(() => {
new Rive({
src: "/your_animation.riv",
canvas: riveCanvas.value,
autoplay: true,
artboard: "Main",
stateMachines: ["State Machine 1"], // e.g. "Clicked", "Hover"
});
});
</script>Store the Rive instance and use it to trigger animations on user interactions.
<script setup>
import { onMounted, ref } from "vue";
import { Rive } from "@rive-app/webgl";
const riveCanvas = ref(null);
let riveInstance = null;
onMounted(() => {
riveInstance = new Rive({
src: "/your_animation.riv",
canvas: riveCanvas.value,
autoplay: true,
artboard: "Main",
stateMachines: ["State Machine 1"],
});
});
function handleClick() {
const inputs = riveInstance?.stateMachineInputs("State Machine 1");
const trigger = inputs?.find((i) => i.name === "Trigger");
trigger?.fire();
}
</script>