0

I followed the official documentation to implement a Rive animation in Vue.js:

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

<script>
import { Rive } from "@rive-app/webgl";
export default {
  mounted() {
    new Rive({
      canvas: this.$refs.canvas,
      src: "http://localhost:8081/test.riv",
      autoplay: true,
    });
  },
};
</script>

This works just fine this way. When I try to replace the src parameter with a path to the .riv file in the assets folder the animation won't show. I already tried:

src: "../assets/test.riv",
src: "assets/test.riv",
src: "@/assets/test.riv",
src: require("../assets/test.riv"),
src: require("assets/test.riv"),
src: require("@/assets/test.riv"),
Lara
  • 84
  • 1
  • 7
  • 30

1 Answers1

0

Your first try actually looks correct

Just realized, that this just worked due to browser caching

You can simply put all your .riv files into public/assets and reference them like assets/your-file.riv.

enter image description here

https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

Thomas Venturini
  • 3,500
  • 4
  • 34
  • 43