# Props Reference
Complete reference for the DotLottieVue component props, with types, defaults, exposed methods, and event access.

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](/en/runtimes/distributions/js/v0.x/api/reference#layout-configuration))                |
| `renderConfig`          | RenderConfig                                                   |          | `{}`                   | Configuration for rendering the animation (see [Render Configuration](/en/runtimes/distributions/js/v0.x/api/reference#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](/en/runtimes/distributions/js/v0.x/api/reference#statemachineconfig)) |
| `playOnHover`           | boolean                                                        |          | `false`                | Plays the animation when the cursor hovers over it, and pauses when it leaves                                                                                             |

Example:

```vue
<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](/en/runtimes/distributions/js/v0.x/api/reference) |

```vue
<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](/en/runtimes/distributions/js/v0.x/api/reference#events) reference. For a working listener pattern, see [Handle Events and Errors](/en/runtimes/distributions/vue/v0.x/examples#handle-events-and-errors).

## Related

- [Examples](/en/runtimes/distributions/vue/v0.x/examples) — these props in action
- [Advanced Usage](/en/runtimes/distributions/vue/v0.x/advanced-usage) — programmatic control through the instance
- [API Reference](/en/runtimes/distributions/vue/v0.x/api-reference) — `setWasmUrl`, instance access, and exported types