Vue
Using Rive in Vue apps

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.
1
<template>
2
<div>
3
<canvas ref="canvas" width="400" height="400"></canvas>
4
</div>
5
</template>
6
7
<script>
8
import { Rive, Layout } from '@rive-app/webgl';
9
10
export default {
11
name: 'Rive',
12
props: {
13
src: String,
14
fit: String,
15
alignment: String
16
},
17
mounted() {
18
new Rive({
19
canvas: this.$refs.canvas,
20
src: this.$props.src,
21
layout: new Layout({
22
fit: this.$props.fit,
23
alignment: this.$props.alignment,
24
}),
25
autoplay: true
26
})
27
}
28
}
29
</script>
Copied!
Copy link