Events

The component forwards lottie-web's playback events as Vue emits. Bind them with @ (kebab-case in templates). None of them carry a payload.

Event	Fires
@complete	when playback finishes (only when loop is false)
@loopComplete	at the end of each loop
@enterFrame	on every rendered frame — very frequently
@segmentStart	when a new animation segment begins
@stopped	after goToAndStop() lands on its frame

<script setup lang="ts">
import { LottieAnimation } from "lottie-web-vue"
import AnimationJSON from "@/assets/animation.json"

function onLoopComplete() {
  console.log("loop finished")
}
</script>

<template>
  <LottieAnimation
    :animation-data="AnimationJSON"
    :loop="true"
    @loop-complete="onLoopComplete"
  />
</template>

@complete

Fired once the animation has completed. Only fires when loop is false — a continuously looping animation never completes.

@loopComplete

Fired each time a full loop of the animation finishes.

@enterFrame

Fired on every frame as it renders. Warning: this fires at the animation's frame rate (typically 60×/second) — keep handlers cheap, or throttle.

@segmentStart

Fired when the animation enters a new segment.

@stopped

Fired by this component (not lottie-web) after a goToAndStop() call has positioned the animation on its target frame.

For lottie-web's underlying event documentation, see the lottie-web README.