Rive in Vue

Add interactive Rive animated icons to your Vue 3 or Nuxt app using the @rive-app/webgl runtime.

Install @rive-app/webgl

Add the Rive WebGL runtime from npm.

npm install @rive-app/webgl

Add the animation to your component

Use a template ref for the canvas element and initialise Rive inside onMounted.

Vue

<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"],
  });
});
</script>

Fire state machine inputs

Store the Rive instance and use it to trigger animations on user interactions.

Vue

<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>

Get your animated icons

Browse icons ready for Vue — free to download.

Browse icons