Vue

Using Rive in Vue apps

This article is out of date! Find the new version here.

Overview

Currently, there is no official Rive "Vue"-specific runtime available, however, you can utilize the Web runtime packages in your Vue applications. Check out this example from the community.

Additionally, if you're interested in creating a Vue runtime with Rive, see the source for rive-react, which just wraps the Web (JS) runtime into convenient hooks and components that make development in React apps easier. We encourage community-driven runtimes and would be happy to look at adding to our docs here!

Getting Started

The following snippet demonstrates how to create a simple Rive component in Vue 2.

<template>
  <div>
    <canvas ref="canvas" width="400" height="400"></canvas>
  </div>
</template>

<script>
import { Rive, Layout } from '@rive-app/canvas';

export default {
  name: 'Rive',
  props: {
    src: String,
    fit: String,
    alignment: String
  },
  mounted() {
    new Rive({
        canvas: this.$refs.canvas,
        src: this.$props.src,
        layout: new Layout({
            fit: this.$props.fit,
            alignment: this.$props.alignment,
        }),
        autoplay: true
    })
  }
}
</script>

If you're using Vue 3 with Typescript, the usage is slightly different with respect to their newer composition API:

<template>
  <div>
    <canvas ref="canvas" width="400" height="400"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Rive } from '@rive-app/canvas';

export default defineComponent({
  name: 'Rive',
  props: {
    src: String
  },
  mounted() {
    new Rive({
      canvas: this.$refs.canvas,
      src: this.$props.src,
      autoplay: true
    })
  }
})
</script>