Usage
Controlling the player
<script setup>import { onMounted, ref, watch } from 'vue';import { DotLottieVue } from '@lottiefiles/dotlottie-vue'const playerRef = ref(null);
<template> <DotLottieVue loop ref="playerRef" src="path-to-lottie.lottie" /> <button @click="playerRef.value.play()">Play</button> <button @click="playerRef.value.pause()">Pause</button> <button @click="playerRef.value.stop()">Stop</button></template>
Refer to dotlottie-web Methods sections to know more about all available methods.
Listening to events
<script setup>import { onMounted, ref, watch } from 'vue';import { DotLottieVue } from '@lottiefiles/dotlottie-vue'const playerRef = ref(null);
onMounted(() => { if (playerRef.value) { const dotLottie = playerRef.value.getDotLottieInstance(); dotLottie.addEventListener('pause', () => { console.log('paused') }); dotlottie.addEventListener('frame', ({ currentFrame }) => { console.log('Frame:', currentFrame) }); }})</script>
<template> <DotLottieVue autoplay loop ref="playerRef" src="path-to-lottie.lottie" /></template>
Refer to dotlottie-web Events sections to know more about all available events.