How to Use Lottie Animations in Vue.js (2025 Guide)

Lottie animations are the fastest way to add high-quality motion to a Vue.js app. This guide covers setup, playback control, and integration using vue3-lottie — the most actively maintained Vue 3 Lottie wrapper.

---

Why Lottie in Vue?

• No GIF overhead — Lottie files are vector-based JSON, typically under 50KB
• Programmatic control — play, pause, loop, seek, speed
• Easy theming — change colors at runtime
• Vue 3 + Composition API friendly

---

Step 0: Preview Your Animation First

Open it in IconKing to see colors, timing, layer structure, edit colors, convert to .lottie (75% smaller).

---

Step 1: Install

npm install vue3-lottie

---

Step 2: Register

// main.js
import Vue3Lottie from 'vue3-lottie'
createApp(App).use(Vue3Lottie).mount('#app')

---

Step 3: Basic Usage

<script setup>
import LoadingAnimation from '@/assets/loading.json'
</script>
<template>
  <Vue3Lottie :animationData="LoadingAnimation" :height="200" :width="200" />
</template>

---

Programmatic Control

<script setup>
import { ref } from 'vue'
const lottieRef = ref(null)
function play() { lottieRef.value.play() }
function pause() { lottieRef.value.pause() }
</script>
<template>
  <Vue3Lottie ref="lottieRef" :animationData="anim" :autoPlay="false" />
  <button @click="play">Play</button>
  <button @click="pause">Pause</button>
</template>

---

dotLottie Format

npm install @lottiefiles/dotlottie-vue

<DotLottieVue src="/animations/loading.lottie" :loop="true" :autoplay="true" />

Convert .json → .lottie at IconKing for 75% smaller files.

---

Performance Tips

1. Pause when not visible with IntersectionObserver
2. Use .lottie format — convert at IconKing
3. Lazy load large animations with dynamic import

---

Summary

1. Install vue3-lottie
2. Pass animation JSON via :animationData
3. Use ref + play()/pause() for programmatic control
4. Listen to @onComplete to chain animations or state
5. Convert to .lottie at IconKing for smaller bundle