Vue Player Props Reference

This document provides a reference for the props available in the dotLottie Vue player.

src*: string

(Required) The source URL or path to the .lottie or .json file.

<DotLottieVue src="https://example.com/animation.lottie" />

data: string | ArrayBuffer

Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.

autoplay: boolean

(Default: false)

Whether the animation should play automatically when loaded.

<DotLottieVue src="animation.lottie" :autoplay="true" />

loop: boolean

(Default: false)

Whether the animation should loop.

<DotLottieVue src="animation.lottie" :loop="true" />

speed: number

(Default: 1)

The playback speed of the animation.

<DotLottieVue src="animation.lottie" :speed="2" />

mode: "forward" | "reverse" | "bounce" | "reverse-bounce"

(Default: "forward")

Animation play mode.

themeId: string

The ID of the dotLottie theme to initially use.

backgroundColor: string

Background color of the animation container. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF").

<DotLottieVue src="animation.lottie" :backgroundColor="'#f0f0f0'" />

renderConfig: object

Configuration for rendering the animation. Refer to the RenderConfig API for details.

useFrameInterpolation: boolean

(Default: true)

Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained, potentially improving performance if subframe accuracy isn't critical. If set to true, it will refresh at each requestAnimationFrame, including intermediate values.

<DotLottieVue src="animation.lottie" :useFrameInterpolation="false" />

segment: [number, number]

(Default: [0, totalFrames - 1])

Animation segment. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame.

<DotLottieVue src="animation.lottie" :segment="[10, 20]" />

marker: string

Named lottie marker to play.

<DotLottieVue src="animation.lottie" marker="intro" />

animationId: string

ID of the animation to load from a multi-animation .lottie file.

<DotLottieVue src="multi.lottie" animationId="scene-2" />

themeData: string

Raw theme JSON string to apply directly, as an alternative to themeId.

layout: object

Layout configuration with fit and align properties. See Layout Configuration.

<DotLottieVue src="animation.lottie" :layout="{ fit: 'contain', align: [0.5, 0.5] }" />

stateMachineId: string

ID of the state machine to load on animation load.

<DotLottieVue src="interactive.lottie" stateMachineId="myFSM" />

stateMachineConfig: object

Security configuration for the state machine (e.g., URL open policy). See StateMachineConfig.

playOnHover: boolean

(Default: false)

Plays the animation when the cursor hovers over it, and pauses when it leaves.

<DotLottieVue src="animation.lottie" :playOnHover="true" />

loopCount: number

(Default: 0)

Number of times the animation loops before stopping. A value of 0 loops infinitely when loop is true.

<DotLottieVue src="animation.lottie" :loop="true" :loopCount="3" />

Accessing the DotLottie Instance

Use the getDotLottieInstance() exposed method to access the underlying DotLottie player:

<template>
  <DotLottieVue ref="playerRef" src="animation.lottie" loop autoplay />
  <button @click="pause">Pause</button>
</template>

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

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

function pause() {
  playerRef.value?.getDotLottieInstance()?.pause();
}
</script>

Next Steps

• Check out Examples to see these props in action

• Learn about Advanced Usage for complex scenarios