# API Reference
API reference for the dotLottie Vue player covering WASM configuration, instance access, and links to the full core player API.

The `@lottiefiles/dotlottie-vue` package wraps the core [dotLottie web player](/en/runtimes/distributions/js/v0.x/api/reference). 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

| Export         | Kind          | Description                                                                                                           |
| -------------- | ------------- | --------------------------------------------------------------------------------------------------------------------- |
| `DotLottieVue` | Vue component | Renders `.lottie` and `.json` animations (see [Props Reference](/en/runtimes/distributions/vue/v0.x/props-reference)) |
| `setWasmUrl`   | Function      | Sets the URL of the WASM renderer binary                                                                              |

## setWasmUrl

```typescript
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`).

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

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

## getDotLottieInstance

```typescript
getDotLottieInstance(): DotLottie
```

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

```vue
<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](/en/runtimes/distributions/js/v0.x/api/reference#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](/en/runtimes/distributions/js/v0.x/api/reference#methods).
- **Events** — `ready`, `load`, `loadError`, `play`, `pause`, `stop`, `loop`, `complete`, `frame`, `render`, `freeze`, `unfreeze`, `destroy`, `renderError`, plus all state machine events. See [Events](/en/runtimes/distributions/js/v0.x/api/reference#events).
- **Types** — `Layout`, `RenderConfig`, `StateMachineConfig`, `Transform`, `Marker`, slot value types, and event payload interfaces. See [Type Definitions](/en/runtimes/distributions/js/v0.x/api/reference#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](/en/runtimes/distributions/vue/v0.x/props-reference) — component props with types and defaults
- [Examples](/en/runtimes/distributions/vue/v0.x/examples) — playback control and event handling recipes
- [Advanced Usage](/en/runtimes/distributions/vue/v0.x/advanced-usage) — programmatic control through the instance
- [Core player API](/en/runtimes/distributions/js/v0.x/api/reference) — the full `DotLottie` API