dotLottie Vue Player API Reference

The DotLottieVue component wraps the core dotLottie web player. After obtaining the player instance via getDotLottieInstance(), you have access to the full core API — properties, methods, and events documented in the JS API Reference.

setWasmUrl

Configure a custom URL for the WASM renderer binary. Call this before rendering any animations — for example, in your main.ts entry point.

import { setWasmUrl } from '@lottiefiles/dotlottie-vue';

setWasmUrl('https://your-cdn.com/dotlottie-player.wasm');

Accessing the Player Instance

Use a template ref and getDotLottieInstance() to get the underlying DotLottie instance:

<template>
  <DotLottieVue ref="playerRef" src="animation.lottie" autoplay loop />
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { DotLottieVue } from '@lottiefiles/dotlottie-vue';

const playerRef = ref<InstanceType<typeof DotLottieVue> | null>(null);

onMounted(() => {
  const dotLottie = playerRef.value?.getDotLottieInstance();
  if (dotLottie) {
    console.log('Total frames:', dotLottie.totalFrames);
    console.log('Duration:', dotLottie.duration);

    dotLottie.addEventListener('complete', () => {
      console.log('Animation completed');
    });
  }
});
</script>

Once you have the instance, you can use all properties, methods, and events from the core player:

• Properties — currentFrame, duration, totalFrames, isPlaying, isPaused, isStopped, isLoaded, loop, speed, mode, segment, manifest, activeAnimationId, activeThemeId, and more. See Properties.

• Methods — play(), pause(), stop(), setFrame(), setSpeed(), setLoop(), setMode(), setSegment(), setMarker(), freeze(), unfreeze(), tween(), load(), loadAnimation(), setTheme(), setLayout(), slot methods, state machine methods, and more. See Methods.

• Events — ready, load, loadError, play, pause, stop, loop, complete, frame, render, freeze, unfreeze, destroy, renderError, plus all state machine events. See Events.

• Types — Layout, RenderConfig, StateMachineConfig, Transform, Marker, slot value types, and event payload interfaces. See Type Definitions.

Related Topics

• Props Reference — Component props

• Examples — Usage examples

• JS API Reference — Full core player API