Getting Started

Introduction

dotLottie-vue is a Vue component that allows you to easily embed Lottie animations in your Vue applications. It is a wrapper around the dotLottie-web library.

Installation

npm install @lottiefiles/dotlottie-vue

Usage

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

<template>
  <DotLottieVue style="height: 500px; width: 500px" autoplay loop src="https://path-to-lottie.lottie" />
</template>

Listening to Events

You can listen to player events using the getDotLottieInstance() method:

<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>

Available Events

You can listen to all DotLottie events using the getDotLottieInstance() method:

Animation Events

• load - Animation data loaded successfully
• loadError - Animation loading failed ({ error: Error })
• ready - WASM module loaded and ready
• play - Animation started playing
• pause - Animation paused
• stop - Animation stopped
• complete - Animation completed
• loop - Animation looped ({ loopCount: number })
• frame - Frame changed ({ currentFrame: number })
• render - Frame rendered ({ currentFrame: number })

Lifecycle Events

• destroy - Instance destroyed
• freeze - Rendering frozen
• unfreeze - Rendering resumed

State Machine Events (Experimental)

• stateMachineStart - State machine started
• stateMachineStop - State machine stopped
• stateMachineTransition - State transition ({ fromState: string, toState: string })
• stateMachineStateEntered - Entered new state ({ state: string })
• stateMachineStateExit - Exited state ({ state: string })

For complete event documentation, see the web package events.