API Reference

The @lottiefiles/dotlottie-vue package wraps the core dotLottie web player. Its own API surface is small: the DotLottieVue component, the setWasmUrl function, and the getDotLottieInstance() method exposed on the component instance. Full animation control is available on the DotLottie instance.

Exports

setWasmUrl

setWasmUrl(url: string)

Sets a custom URL for the WASM renderer binary. Must be called before any animation renders — for example, in the application entry point (main.ts).

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

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

getDotLottieInstance

getDotLottieInstance(): DotLottie

Exposed on the component instance, accessed through a template ref. Returns the underlying DotLottie player instance.

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

<script setup lang="ts">
import { ref, onMounted } 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>

The instance exposes the full core player API:

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

Lifecycle

When the component unmounts, it calls destroy() on the underlying player instance, which releases the renderer and unregisters all event listeners. Manual cleanup is not required.

Related

• Props Reference — component props with types and defaults

• Examples — playback control and event handling recipes

• Advanced Usage — programmatic control through the instance

• Core player API — the full DotLottie API