Add Lottie animated icons to Vue 3 or Nuxt projects using the lottie-web library with the Composition API.
Add the lottie-web package from npm.
npm install lottie-webUse a template ref for the container and initialise lottie-web inside onMounted.
<template>
<div ref="lottieContainer" style="width: 150px; height: 150px;"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import lottie from 'lottie-web'
import animationData from '@/assets/your_animation.json'
const lottieContainer = ref(null)
onMounted(() => {
lottie.loadAnimation({
container: lottieContainer.value,
renderer: 'svg',
loop: true,
autoplay: true,
animationData
})
})
</script>Store the animation instance returned by loadAnimation to control playback.
const anim = lottie.loadAnimation({ ... })
anim.pause()
anim.play()
anim.stop()