How to use Lottie in Vue

Install

Add the player package vue3-lottie.

npm install vue3-lottie

Add the animation

1. 1 Export your animation as .json from Lottie Max.
2. 2 Install vue3-lottie.
3. 3 Import the JSON and pass it to <Vue3Lottie :animationData="..." />.
4. 4 Set loop, autoPlay, and size via props.

<script setup>
import { Vue3Lottie } from "vue3-lottie";
import animation from "./animation.json";
</script>

<template>
  <Vue3Lottie :animationData="animation" :loop="true" :autoPlay="true" :height="320" />
</template>

Tips

• → Register the component locally per file (shown above) or globally in main.js.
• → Use :width / :height props to size the animation.
• → Bind a ref to control play/pause/seek programmatically.

FAQ

Is Lottie Max free to use with Vue?

Yes. Lottie Max is free and runs in your browser — make the animation, export it, and drop it into your project.

What file should I export for Vue?

A Lottie .json works everywhere. For a smaller file, export .lottie (dotLottie, ~3× smaller) where the player supports it.

Where do I get the animation file?

Create it in the Lottie Max studio, then use Export to download .json / .lottie or copy a ready-to-paste embed snippet.

Using a different stack?