How to Add Lottie Animations to Vue.js (2025 Guide)

npm install @lottiefiles/dotlottie-vue

<template>
  <DotLottieVue
    src="/animations/loader.lottie"
    :loop="true"
    :autoplay="true"
    style="width: 200px; height: 200px"
  />
</template>

<script setup>
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
</script>

<template>
  <DotLottieVue
    ref="lottieRef"
    src="/animations/check.lottie"
    :loop="false"
    :autoplay="false"
  />
  <button @click="play">Play</button>
  <button @click="pause">Pause</button>
</template>

<script setup>
import { ref } from 'vue'
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'

const lottieRef = ref(null)

function play() {
  lottieRef.value?.play()
}
function pause() {
  lottieRef.value?.pause()
}
</script>

npm install lottie-web

<template>
  <div ref="container" style="width: 200px; height: 200px" />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import lottie from 'lottie-web'

const container = ref(null)
let anim = null

onMounted(() => {
  anim = lottie.loadAnimation({
    container: container.value,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/animations/loader.json',
  })
})

onBeforeUnmount(() => {
  anim?.destroy()
})
</script>

<template>
  <div ref="container" style="width: 100px; height: 100px" />
  <button @click="handleSubmit">Submit</button>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import lottie from 'lottie-web'
import successData from '@/assets/success.json'

const container = ref(null)
let anim = null

onMounted(() => {
  anim = lottie.loadAnimation({
    container: container.value,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    animationData: successData,
  })
})

function handleSubmit() {
  anim?.goToAndPlay(0)
}

onBeforeUnmount(() => anim?.destroy())
</script>

// plugins/lottie.js
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('DotLottie', DotLottieVue)
})