Limited offer — lifetime access:$75$60
Lottie · Vue

Using Lottie icons in Vue

Install lottie-web, grab a ref to a container div, and load the animation in onMounted. Works the same in Vue 3 and Nuxt.

1

Install lottie-web

Add the package from npm.

JS
npm install lottie-web
2

Load the animation in onMounted

Use a template ref for the container. onMounted is the right place — Lottie needs the actual DOM element.

Vue
<template>
  <div ref="lottieContainer" style="width: 150px; height: 150px;"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import lottie from 'lottie-web'
import animationData from '@/assets/your_animation.json'

const lottieContainer = ref(null)
let anim = null

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

onUnmounted(() => anim?.destroy())
</script>
3

Control playback

The instance returned by loadAnimation has pause, play, and stop methods you can call from anywhere in the component.

JS
anim.pause()
anim.play()
anim.stop()

Common questions

Does this work in Nuxt?

Yes. The onMounted pattern keeps Lottie browser-only, so it won't run during SSR and won't cause hydration issues.

Should I use lottie-web or a Vue package?

lottie-web directly. Vue-specific wrappers add complexity without much benefit — the vanilla API is simple enough with a ref and onMounted.

How do I clean up when the component unmounts?

Call anim.destroy() in onUnmounted. The code above already shows this pattern.

Get your animated icons

Browse icons ready for Vue — free to download.

Browse icons