dotLottie Vue Player Props Reference

The DotLottieVue component accepts the following props.

Props

Prop	Type	Required	Default	Description
`src`	string	✔️	`undefined`	Source URL or path to the `.lottie` or `.json` file
`data`	string \| ArrayBuffer		`undefined`	Animation data as a Lottie JSON string or an ArrayBuffer for `.lottie` animations
`autoplay`	boolean		`false`	Auto-starts the animation on load
`loop`	boolean		`false`	Determines if the animation should loop
`loopCount`	number		`0`	Number of times the animation loops before stopping. `0` loops infinitely when `loop` is `true`
`speed`	number		`1`	Animation playback speed. `1` is regular speed
`mode`	`"forward"` \| `"reverse"` \| `"bounce"` \| `"reverse-bounce"`		`"forward"`	Animation play mode
`segment`	[number, number]		`[0, totalFrames - 1]`	Animation segment. Accepts an array of two numbers: start frame and end frame
`marker`	string		`undefined`	Named Lottie marker to play
`animationId`	string		`undefined`	ID of the animation to load from a multi-animation `.lottie` file
`themeId`	string		`undefined`	The ID of the dotLottie theme to initially use
`themeData`	string		`undefined`	Raw theme JSON string to apply directly, as an alternative to `themeId`
`backgroundColor`	string		`undefined`	Background color of the animation container. Accepts 6-digit or 8-digit hex color string (e.g., `"#000000"`, `"#000000FF"`)
`layout`	Layout		`undefined`	Layout configuration with `fit` and `align` properties (see Layout Configuration)
`renderConfig`	RenderConfig		`{}`	Configuration for rendering the animation (see Render Configuration)
`useFrameInterpolation`	boolean		`true`	Determines if the animation should update on subframes. When `false`, the original AE frame rate is maintained, potentially improving performance
`stateMachineId`	string		`undefined`	ID of the state machine to load on animation load
`stateMachineConfig`	StateMachineConfig		`undefined`	Security configuration for the state machine, such as the URL open policy (see StateMachineConfig)
`playOnHover`	boolean		`false`	Plays the animation when the cursor hovers over it, and pauses when it leaves

Example:

<DotLottieVue
  src="https://example.com/animation.lottie"
  :autoplay="true"
  :loop="true"
  :speed="2"
  :segment="[10, 20]"
  :backgroundColor="'#f0f0f0'"
/>

Exposed Methods

The component instance, obtained through a template ref, exposes the following method:

Method	Description
`getDotLottieInstance()`	Returns the underlying `DotLottie` player instance, which exposes the full core player API

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

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

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

const dotLottie = () => playerRef.value?.getDotLottieInstance();
</script>

Events

Player events (load, play, pause, complete, loadError, and others) are surfaced through the underlying DotLottie instance's addEventListener() method, not as Vue component events. The complete list of events and their payloads is in the core player Events reference. For a working listener pattern, see Handle Events and Errors.

Examples — these props in action
Advanced Usage — programmatic control through the instance
API Reference — setWasmUrl, instance access, and exported types

Props Reference

Props

Exposed Methods

Events

Related